
<!DOCTYPE html>
<html lang="zh">
    
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <link href="css/layout.css" type="text/css" rel="stylesheet" />
        <link href="css/real.css" type="text/css" rel="stylesheet" />
        <link href="font/icon.css" type="text/css" rel="stylesheet" />
        <link href="css/tag.css" type="text/css" rel="stylesheet" />
        <title>real</title>
        <style>
        .ico span {
            width: 25%;
            margin-top: 15px;
            float: left;
            display: block;
        }
        .ico span>i.real_icon {
            font-size: 26px;
        }
        .ico span:last-child {
        }
        .ico div {
            clear: both;
            display: block;
            margin-top: 24px;
            min-height: 32px;
        }
        #chang-jian-ye-mian-bu-ju+.demo-container .real-main {
            background-color: #e9eef3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }
        #chang-jian-ye-mian-bu-ju+.demo-container .real-aside {
            background-color: #d3dce6;
            text-align: center;
            line-height: 200px;
        }
        #chang-jian-ye-mian-bu-ju+.demo-container .real-footer, #chang-jian-ye-mian-bu-ju+.demo-container .real-header {
            text-align: center;
        }
        h3 {
            margin-bottom: 20px;
            margin-top: 20px;
            color: #606266;
        }
        .pre {
            margin-bottom: 20px;
            margin-top: 36px;
        }
        .pleft {
            position: fixed;
            top: 0px!important;
            left: 0px!important;
            width: 250px;
            height: 100%;
            overflow: scroll;
        }
        .pright {
            margin-left: 200px!important;
        }
        .page_tit4 {
            padding-bottom: 0px;
            margin-bottom: 10px;
        }
        .demo-block.demo-alert .real_alert:first-child {
            margin: 0;
        }
        .demo-block.demo-alert .real_alert {
            margin: 20px 0 0;
        }
        .source {
            margin-top: 15px;
        }
        .source>div {
            margin-top: 15px;
        }
        .source .tag-group {
            margin-top: 15px;
        }
        .demo-avatar .sub-title {
            margin-bottom: 10px;
            font-size: 14px;
            color: #8492a6;
        }
        .demo-avatar .real-col:not(:last-child) {
            border-right: 1px solid rgba(224, 230, 237, .5);
        }
        .real-block {
            float: left;
            flex: 1;
            margin: 15px;
        }
        .real-col-12 {
            width: 50%;
            float: left;
        }
        .block {
            float: left;
        }
        </style>
    </head>
    
    <body> <a class="real-button real-new-blue" href="http://sa-app.dev33.cn/wall.html?name=real" target="_blank" style=" 
    position: fixed;
   /* right: 5px;*/
   left:220px;
    font-size: 22px;
    color: #fff;
    font-weight: 600;
   /* bottom:10px;*/
    z-index: 9999;
     top: 10px;
   /* background: #555555;*/
    padding: 15px;
    border-radius: 5px;">需求墙</a>
 <a class="real-button real-new-blue" href="https://gitee.com/liniduoyuan/real/tree/master" target="_blank" style=" 
    position: fixed;
   /* right: 5px;*/
   left:220px;
    font-size: 22px;
    color: #fff;
    font-weight: 600;
   /* bottom:10px;*/
    z-index: 9999;
     top: 86px;
   /* background: #555555;*/
    padding: 15px;
    border-radius: 5px;">下载</a>

        <div class="page">
            <div class="page-pr">
                <div class="pleft">
                    <ul>
                        <li><a href="#col">基础 &lt;Basic&gt;</a>

                        </li>
                        <li class="on son li-col"><a href="#col">布局</a>

                        </li>
                        <li class="son li-Container"><a href="#Container">布局容器</a>

                        </li>
                        <li class="son li-color"><a href="#color">颜色</a>

                        </li>
                        <li class="son li-bor"><a href="#bor">边框</a> 
                        </li>
                        <li class="son li-icon"><a href="#icon">图标</a> 
                        </li>
                        <li class="son li-font"><a href="#font">字号</a> 
                        </li>
                        <li class="son li-link"><a href="#link">链接</a> 
                        </li>
                        <li class="son li-button"><a href="#button">按钮</a>

                        </li>
                        <li><a href="#form">表单 &lt;form&gt;</a>

                        </li>
                        <li class="son li-form"><a href="#form">全表单</a>

                        </li>
                        <li class="son li-input"><a href="#input">文本框</a>

                        </li>
                        <li class="son li-textarea"><a href="#textarea">文本域</a>

                        </li>
                        <li class="son li-select"><a href="#select">下拉框</a>

                            <li class="son li-radio"><a href="#radio">单选框</a>

                            </li>
                            <li class="son li-checkbox"><a href="#checkbox">复选框</a>

                            </li>
                            <li class="son li-switch"><a href="#switch">开关</a>

                            </li>
                            <li class="son li-file"><a href="#file">上传控件</a>

                            </li>
                            <li><a href="#table-1">表格 &lt;table&gt;</a>

                            </li>
                            <li class="son li-table-1"><a href="#table-1">默认样式</a>

                            </li>
                            <li class="son li-table-2"><a href="#table-2">无外部边框样式</a>

                            </li>
                            <li class="son li-table-3"><a href="#table-3">无内部边框样式</a>

                            </li>
                            <li class="son li-table-4"><a href="#table-4">无全部边框样式</a>

                            </li>
                            <li class="son li-table-5"><a href="#table-5">水平边框样式</a>

                            </li>
                            <li class="son li-table-6"><a href="#table-6">水平边框无外边框样式</a>

                            </li>
                            <li class="son li-table-7"><a href="#table-7">圆角样式</a>

                            </li>
                            <li class="son li-table-8"><a href="#table-8">行间隔背景色</a>

                            </li>
                            <li class="son li-table-9"><a href="#table-9">鼠标悬停样式</a>

                            </li>
                            <li><a href="#timeLine">其他 &lt;timeLine&gt;</a>

                            </li>
                            <li class="son li-timeLine"><a href="#timeLine">时间轴</a>

                            </li>
                            <li class="son li-progress"><a href="#progress">进度条</a>

                            </li>
                            <li class="son li-amplification"><a href="#amplification">图片放大</a>

                            </li>
                            <li class="son li-container"><a href="#container">图片反转</a>

                            </li>
                            <li class="son li-coupons"><a href="#coupons">优惠卷</a>

                            </li>
                            <li class="son li-Tag"><a href="#Tag">标签</a>

                            </li>
                            <li class="son li-Alert"><a href="#Alert">警告</a>

                            </li>
                            <li class="son li-Breadcrumb"><a href="#Breadcrumb">面包屑</a>

                            </li>
                            <li class="son li-PageHeader"><a href="#PageHeader">页头</a>

                            </li>
                            <li class="son li-Steps"><a href="#Steps">步骤条</a>

                            </li>
                            <li class="son li-Card"><a href="#Card">卡片</a>

                            </li>
                            <li class="son li-Avatar"><a href="#Avatar">头像</a>

                            </li>
                    </ul>
                </div>
                <!--pleft-->
                <!--color-->
                <div class="pright">
                    <div id="col" class="maindiv">
                        <div class="page_tit">字体、图标均为自定义，这里不做封装</div>
                        <div class="table-real-row">
                             <h1>使用方法</h1>
下载引用real.css，复制文档的类名就好了</div>
                        <!--table-real-row-->
                    </div>
                    <div id="col" class="maindiv">
                        <div class="page_tit">布局 &lt;col&gt;</div>
                        <div class="table-real-row">
                            <style>
                            .real-row {
                                margin-top: 15px;
                                width: 100%;
                            }
                            </style>
                             <h3>24格栅</h3> 
                            <div class="real-row">
                                <div class="real-col-3 Bg-Black " style="border:0px;">real-col-3</div>
                                <div class="real-col-3 Bg-Gray " style="border:0px;">real-col-3</div>
                                <div class="real-col-3 Bg-Black " style="border:0px;">real-col-3</div>
                                <div class="real-col-3 Bg-Gray " style="border:0px;">real-col-3</div>
                                <div class="real-col-3 Bg-Black " style="border:0px;">real-col-3</div>
                                <div class="real-col-3 Bg-Gray " style="border:0px;">real-col-3</div>
                                <div class="real-col-3 Bg-Black " style="border:0px;">real-col-3</div>
                                <div class="real-col-3 Bg-Gray " style="border:0px;">real-col-3</div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-4 Bg-Black " style="border:0px;">real-col-4</div>
                                <div class="real-col-4 Bg-Gray " style="border:0px;">real-col-4</div>
                                <div class="real-col-4 Bg-Black " style="border:0px;">real-col-4</div>
                                <div class="real-col-4 Bg-Gray " style="border:0px;">real-col-4</div>
                                <div class="real-col-4 Bg-Black " style="border:0px;">real-col-4</div>
                                <div class="real-col-4 Bg-Gray " style="border:0px;">real-col-4</div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-5 Bg-Black " style="border:0px;">real-col-5</div>
                                <div class="real-col-5 Bg-Gray " style="border:0px;">real-col-5</div>
                                <div class="real-col-5 Bg-Black " style="border:0px;">real-col-5</div>
                                <div class="real-col-5 Bg-Gray " style="border:0px;">real-col-5</div>
                                <div class="real-col-5 Bg-Black " style="border:0px;">real-col-5</div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-6 Bg-Black " style="border:0px;">real-col-6</div>
                                <div class="real-col-6 Bg-Gray " style="border:0px;">real-col-6</div>
                                <div class="real-col-6 Bg-Black " style="border:0px;">real-col-6</div>
                                <div class="real-col-6 Bg-Gray " style="border:0px;">real-col-6</div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-8 Bg-Black " style="border:0px;">real-col-8</div>
                                <div class="real-col-8 Bg-Gray " style="border:0px;">real-col-8</div>
                                <div class="real-col-8 Bg-Black " style="border:0px;">real-col-8</div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-12 Bg-Black " style="border:0px;">real-col-12</div>
                                <div class="real-col-12 Bg-Gray " style="border:0px;">real-col-12</div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-24 Bg-Black " style="border:0px;">real-col-24</div>
                            </div>
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;div class=&quot;real-col-12 &quot;style=&quot;    background-color: #67C23A; &quot;&gt;  &lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <div class="real-row real-col-spa4">
                                <div class="real-col-12" style="border:0px;">
                                    <div class=" Bg-Gray " style="    height: 50px;
    width: 100%;">real-col-spa4</div>
                                </div>
                                <div class="real-col-12 " style="border:0px;">
                                    <div class="  Bg-Black " style="    height: 50px;
    width: 100%;">real-col-spa4</div>
                                </div>
                            </div>
                            <div class="real-row real-col-spa5">
                                <div class="real-col-12 " style="border:0px;">
                                    <div class="  Bg-Black " style="    height: 50px;
    width: 100%;">spa5</div>
                                </div>
                                <div class="real-col-12" style="border:0px;">
                                    <div class=" Bg-Gray " style="    height: 50px;
    width: 100%;">spa5</div>
                                </div>
                            </div>
                            <div class="real-row real-col-spa6">
                                <div class="real-col-12" style="border:0px;">
                                    <div class=" Bg-Gray " style="    height: 50px;
    width: 100%;">spa6</div>
                                </div>
                                <div class="real-col-12 " style="border:0px;">
                                    <div class="  Bg-Black " style="    height: 50px;
    width: 100%;">spa6</div>
                                </div>
                            </div>real-col-spa4、 real-col-spa5 、 real-col-spa6、 real-col-spa8、 real-col-spa10、 real-col-spa12、 real-col-spa14、 real-col-spa15、 real-col-spa16、 real-col-spa18、 real-col-spa20、 real-col-spa22、 real-col-spa24、 real-col-spa25、 real-col-spa26、 real-col-spa28、
                            real-col-spa30、
                            <div class="pre">
                                <ol>
                                    <li><span> &lt;div class=&quot;real-row real-col-spa6&quot;&gt;   </span>

                                    </li>
                                    <li><span> &lt; div class=&quot;real-col-12&quot; style=&quot;border:0px;&quot;&gt;&lt;div class=&quot; Bg-Green&quot; style=&quot;height: 35px;  width: 100%;&quot;&gt;spa6&lt;/div&gt;&lt;/div&gt;  </span>

                                    </li>
                                    <li><span> &lt;div class=&quot;real-col-12&quot;style=&quot;border:0px;&quot;&gt;  &lt;div class=&quot;Bg-Blue&quot; style=&quot; height: 35px;
    width: 100%;&quot;&gt;  spa6&lt;/div&gt;  &lt;/div&gt; </span>

                                    </li>
                                    <li><span> &lt;/div&gt;    </span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <div class="real-row">real-row{内容容器}</div>
                        </div>
                        <!--table-real-row-->
                    </div>
                    <div id="Container" class="maindiv">
                        <div class="page_tit">布局 &lt;Container&gt;</div>
                        <div class="table-real-row">
                            <section class="content element-doc content">
                                <p><code>&lt;container&gt;</code>：外层容器。当子元素中包含 <code>&lt;real-header&gt;</code> 或 <code>&lt;real-footer&gt;</code> 时，全部子元素会垂直上下排列，否则会水平左右排列。</p>
                                <p><code>&lt;header&gt;</code>：顶栏容器。</p>
                                <p><code>&lt;aside&gt;</code>：侧边栏容器。</p>
                                <p><code>&lt;main&gt;</code>：主要区域容器。</p>
                                <p><code>&lt;footer&gt;</code>：底栏容器。</p>
                                <div class="tip">
                                    <p>以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<code>&lt;real-container&gt;</code> 的子元素只能是后四者，后四者的父元素也只能是 <code>&lt;real-container&gt;</code>。</p>
                                </div>
                                 <h3 id="chang-jian-ye-mian-bu-ju"> ¶  常见页面布局</h3>

                                <div class="demo-block demo-zh-CN demo-container">
                                    <div class="source">
                                        <div>
                                            <section class="real-container is-vertical">
                                                <header class="real-header" style="height: 60px;">Header</header>
                                                <main class="real-main">Main</main>
                                            </section>
                                            <section class="real-container is-vertical">
                                                <header class="real-header" style="height: 60px;">Header</header>
                                                <main class="real-main">Main</main>
                                                <footer class="real-footer" style="height: 60px;">Footer</footer>
                                            </section>
                                            <section class="real-container">
                                                <aside class="real-aside" style="width: 200px;">Aside</aside>
                                                <main class="real-main">Main</main>
                                            </section>
                                            <section class="real-container is-vertical">
                                                <header class="real-header" style="height: 60px;">Header</header>
                                                <section class="real-container">
                                                    <aside class="real-aside" style="width: 200px;">Aside</aside>
                                                    <main class="real-main">Main</main>
                                                </section>
                                            </section>
                                            <section class="real-container is-vertical">
                                                <header class="real-header" style="height: 60px;">Header</header>
                                                <section class="real-container">
                                                    <aside class="real-aside" style="width: 200px;">Aside</aside>
                                                    <section class="real-container is-vertical">
                                                        <main class="real-main">Main</main>
                                                        <footer class="real-footer" style="height: 60px;">Footer</footer>
                                                    </section>
                                                </section>
                                            </section>
                                            <section class="real-container">
                                                <aside class="real-aside" style="width: 200px;">Aside</aside>
                                                <section class="real-container is-vertical">
                                                    <header class="real-header" style="height: 60px;">Header</header>
                                                    <main class="real-main">Main</main>
                                                </section>
                                            </section>
                                            <section class="real-container">
                                                <aside class="real-aside" style="width: 200px;">Aside</aside>
                                                <section class="real-container is-vertical">
                                                    <header class="real-header" style="height: 60px;">Header</header>
                                                    <main class="real-main">Main</main>
                                                    <footer class="real-footer" style="height: 60px;">Footer</footer>
                                                </section>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                                 <h3 id="container-attributes"><a href="https://element.eleme.cn/#/zh-CN/component/container#container-attributes" aria-hidden="true" class="header-anchor">¶</a> Container Attributes</h3>

                                <table class="real-table">
                                    <thead>
                                        <tr>
                                            <th>参数</th>
                                            <th>说明</th>
                                            <th>类型</th>
                                            <th>可选值</th>
                                            <th>默认值</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>direction</td>
                                            <td>子元素的排列方向</td>
                                            <td>string</td>
                                            <td>horizontal / vertical</td>
                                            <td>子元素中有 <code>real-header</code> 或 <code>real-footer</code> 时为 vertical，否则为 horizontal</td>
                                        </tr>
                                    </tbody>
                                </table>
                                 <h3 id="header-attributes"><a href="https://element.eleme.cn/#/zh-CN/component/container#header-attributes" aria-hidden="true" class="header-anchor">¶</a> Header Attributes</h3>

                                <table class="real-table">
                                    <thead>
                                        <tr>
                                            <th>参数</th>
                                            <th>说明</th>
                                            <th>类型</th>
                                            <th>可选值</th>
                                            <th>默认值</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>height</td>
                                            <td>顶栏高度</td>
                                            <td>string</td>
                                            <td>—</td>
                                            <td>60px</td>
                                        </tr>
                                    </tbody>
                                </table>
                                 <h3 id="aside-attributes"><a href="https://element.eleme.cn/#/zh-CN/component/container#aside-attributes" aria-hidden="true" class="header-anchor">¶</a> Aside Attributes</h3>

                                <table class="real-table">
                                    <thead>
                                        <tr>
                                            <th>参数</th>
                                            <th>说明</th>
                                            <th>类型</th>
                                            <th>可选值</th>
                                            <th>默认值</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>width</td>
                                            <td>侧边栏宽度</td>
                                            <td>string</td>
                                            <td>—</td>
                                            <td>300px</td>
                                        </tr>
                                    </tbody>
                                </table>
                                 <h3 id="footer-attributes"><a href="https://element.eleme.cn/#/zh-CN/component/container#footer-attributes" aria-hidden="true" class="header-anchor">¶</a> Footer Attributes</h3>

                                <table class="real-table">
                                    <thead>
                                        <tr>
                                            <th>参数</th>
                                            <th>说明</th>
                                            <th>类型</th>
                                            <th>可选值</th>
                                            <th>默认值</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>height</td>
                                            <td>底栏高度</td>
                                            <td>string</td>
                                            <td>—</td>
                                            <td>60px</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </section>
                            <div class="pre">
                                <ol></ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                        </div>
                        <!--table-real-row-->
                    </div>
                    <div id="color" class="maindiv">
                        <div class="page_tit">背景样式 &lt;color&gt;</div>
                        <div class="table-real-row"> <a class="button Bg-Green">Bg-Green</a>  <a class="button Bg-Blue">Bg-Blue</a>  <a class="button Bg-Warning">Bg-Warning</a>  <a class="button Bg-Red">Bg-Red</a>  <a class="button Bg-Gray">Bg-Gray</a>  <a class="button Bg-Black">Bg-Black</a>
 <a class="button Bg-Orange">Bg-Orange</a>

                            <p
                            style="margin: 5px;clear: left;">
                                 <h3>蓝色</h3>

                                <div style="padding: 1.5%;width:23%;height:50px;color:#fff; float: left;background: #409eff;">蓝色( #409eff)</div>
                                <div style="padding: 1.5%;width:23%;height:50px;color:#fff;  float: left;background: #66b1ff;">蓝色( #66b1ff)</div>
                                <div style="padding: 1.5%;width:23%;height:50px;color:#fff;  float: left;background: #79bbff;">蓝色( #79bbff)</div>
                                <div style="padding: 1.5%;width:23%;height:50px;color:#fff;  float: left;background: #8cc5ff;">蓝色( #8cc5ff)</div>
                                <div style="padding: 1.5%;width:23%;height:50px; float: left;background: #a0cfff;">蓝色( #a0cfff)</div>
                                <div style="padding: 1.5%;width:23%;height:50px; float: left;background: #b3d8ff;">蓝色( #b3d8ff)</div>
                                <div style="padding: 1.5%;width:23%;height:50px; float: left;background: #c6e2ff;">蓝色( #c6e2ff)</div>
                                <div style="padding: 1.5%;width:23%;height:50px; float: left;background: #d9ecff;">蓝色( #d9ecff)</div>
                                <div style="padding: 1.5%;width:23%;height:50px; float: left;background: #ecf5ff;">蓝色( #ecf5ff)</div>
                                </p>
                                <p style="margin: 5px;clear: left;">
                                     <h3>绿（成功色）</h3>

                                    <div style="padding: 1.5%;width:23%;height:50px;color:#fff;  float: left;background: #67c23a;">绿( #67c23a)</div>
                                    <div style="padding: 1.5%;width:23%;height:50px; float: left;background: #e1f3d8;">绿( #e1f3d8)</div>
                                    <div style="padding: 1.5%;width:23%;height:50px; float: left;background: #f0f9eb;">绿( #f0f9eb)</div>
                                </p>
                                <p style="margin: 5px;clear: left;">
                                     <h3>黄（警告色）</h3>

                                    <div style="padding: 1.5%;width:23%;height:50px; color:#fff; float: left; background: #e6a23c;">橙( #e6a23c)</div>
                                    <div style="padding: 1.5%;width:23%;height:50px; float: left; background: #faecd8;">橙( #faecd8)</div>
                                    <div style="padding: 1.5%;width:23%;height:50px; float: left; background: #fdf6ec;">橙( #fdf6ec)</div>
                                </p>
                                <div style="margin: 5px;clear: left;">
                                     <h3>红（危险色）</h3>

                                    <div style="padding: 1.5%;width:23%;height:50px;color:#fff;  float: left; background: #f56c6c;">红( #f56c6c)</div>
                                    <div style="padding: 1.5%;width:23%;height:50px; float: left; background: #fde2e2;">红( #fde2e2)</div>
                                    <div style="padding: 1.5%;width:23%;height:50px; float: left; background: #f4f4f5;">红( #f4f4f5)</div>
                                </div>
                                <p style="clear: left;">
                                     <h3>灰（普通色）</h3>

                                    <div style="padding: 1.5%;width:23%;height:50px;color:#fff;  float: left; background: #909399;">灰( #909399)</div>
                                    <div style="padding: 1.5%;width:23%;height:50px; float: left; background: #e9e9eb;">灰( #e9e9eb)</div>
                                    <div style="padding: 1.5%;width:23%;height:50px; float: left; background: #f4f4f5;">灰( #f4f4f5)</div>
                                </p>
                                <p style="margin: 5px;clear: left;">
                                     <h3>文字</h3>

                                    <div style="margin: 5px;padding: 1.5%;width:45%;height:50px;color:#e4e7ed; float: left; background: #303133;">主要文字( #303133)</div>
                                    <div style="margin: 5px;padding: 1.5%;width:45%;height:50px;color:#fff;  float: left; background: #606266;">常规文字( #606266)</div>
                                    <div style="margin: 5px;padding: 1.5%;width:45%;height:50px;color:#fff;  float: left; background: #909399;">次要文字( #909399)</div>
                                    <div style="margin: 5px;padding: 1.5%;width:45%;height:50px;color:#fff;  float: left; background: #000000;">基础黑色( #000000)</div>
                                    <div style="margin: 5px;padding: 1.5%;width:45%;height:50px; float: left; background: #FFFFFF;" class="bor-green">基础白色( #fff)</div>
                                    <div style="margin: 5px;padding: 1.5%;width:45%;height:50px;  float: left; background: #C0C4CC;">占位文字( #C0C4CC)</div>
                                </p>
                                <p style="margin: 5px;clear: left;">
                                     <h3>边框</h3>

                                    <div style="margin: 5px;padding: 1.5%;width:45%;height:50px; float: left; background: #DCDFE6;">一级边框( #DCDFE6)</div>
                                    <div style="margin: 5px;padding: 1.5%;width:45%;height:50px; float: left; background: #E4E7ED;">二级边框( #E4E7ED)</div>
                                    <div style="margin: 5px;padding: 1.5%;width:45%;height:50px; float: left; background: #EBEEF5;">三级边框( #EBEEF5)</div>
                                    <div style="margin: 5px;padding: 1.5%;width:45%;height:50px; float: left; background: #F2F6FC;">四级边框( #F2F6FC)</div>
                                    <p style="clear: left;"></p>
                        </div>
                        <!--table-real-row-->
                    </div>
                    <!--input-->
                    <div id="bor" class="maindiv">
                        <div class="page_tit">边框 &lt;bor&gt;</div>
                        <div class="table-real-row">
                             <h3>边框样式</h3> 
                            <button class="button bor-green">bor-green</button>
                            <button class="button bor-blue">bor-blue</button>
                            <button class="button bor-red">bor-red</button>
                            <button class="button bor-gray">bor-gray</button>
                            <button class="button bor-black">bor-black</button>
                            <button class="button bor-warning">bor-warning</button>
                            <button class="button bor-Orange">bor_Orange</button>
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">bor-green</span>&quot;&gt;边框&lt;/button&gt;&lt;-- h--&gt</span>
                                    </li>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">bor-blue</span>&quot;&gt;边框&lt;/button&gt;</li>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">bor-red</span>&quot;&gt;边框&lt;/button&gt;&lt;-- h--&gt</li>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">bor-gray</span>&quot;&gt;边框&lt;/button&gt;</li>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">bor-black</span>&quot;&gt;边框&lt;/button&gt;</li>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">bor-warning</span>&quot;&gt;边框&lt;/button&gt;</li>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">bor_Orange</span>&quot;&gt;边框&lt;/button&gt;</li>
                                </ol>
                                <div class="precode"></div>
                            </div>
                             <h3>圆角大小</h3>

                            <button class="button bor-green  radius1">radius1</button>
                            <button class="button bor-blue  radius2">radius2</button>
                            <button class="button bor-warning  radius3">radius3</button>
                            <button class="button bor-red  radius4">radius4</button>
                            <button class="button bor-gray radius5">radius5</button>
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">bor-green radius3</span>&quot;&gt;边框&lt;/button&gt;&lt;-- h--&gt</span>
                                    </li>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">radius1</span>&quot;&gt;边框&lt;/button&gt;</li>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">radius2</span>&quot;&gt;边框&lt;/button&gt;</li>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">radius4</span>&quot;&gt;边框&lt;/button&gt;</li>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">radius45</span>&quot;&gt;边框&lt;/button&gt;</li>
                                </ol>
                                <div class="precode"></div>
                            </div>
                             <h3>阴影大小</h3>

                            <button class="button bor-green  shadow1">shadow1</button>
                            <button class="button bor-green  shadow2">shadow2</button>
                            <div class="pre" style="margin-top:50px;">
                                <ol>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">shadow1</span>&quot;&gt;边框&lt;/button&gt;</li>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">shadow2</span>&quot;&gt;边框&lt;/button&gt;</li>
                                </ol>
                                <div class="precode"></div>
                            </div>
                        </div>
                        <!--table-real-row-->
                    </div>
                    <div id="icon" class="maindiv">
                        <div class="page_tit">图标 &lt;icon&gt;</div>
                        <div class="table-real-row">
                            <div class="ico">
                                <div>
                                     <h3>设置</h3>
 <span> <i class="real_icon real_icon_set_fill"> </i>  real_icon_set_fill（ \e614）</span>
 <span><i class="real_icon real_icon_set_sm"> </i>  real_icon_set_sm（ \e620）</span>
 <span> <i class="real_icon real_icon_set"> </i>  real_icon_set（ \e716）</span>
 <span> <i class="real_icon real_icon_util"> </i>  real_icon_util（ \e631）</span>
 <span> <i class="real_icon real_icon_slider"> </i>  real_icon_slider（ \e714）</span>

                                </div>
                                <div>
                                     <h3>用户组</h3>
 <span><i class="real_icon real_icon_username"> </i>  real_icon_username（ \e66f）</span>
 <span><i class="real_icon real_icon_friends"> </i>  real_icon_friends（ \e612）</span>  <span> <i class="real_icon real_icon_user"> </i>  real_icon_user（ \e770）</span>  <span> <i class="real_icon real_icon_group"> </i>  real_icon_group（ \e613）</span> 
                                </div>
                                <div>
                                     <h3>应用</h3>
 <span> <i class="real_icon real_icon_chrome"> </i>  real_icon_chrome（ \e68a）</span>
 <span> <i class="real_icon real_icon_firefox"> </i>  real_icon_firefox（ \e686）</span>  <span><i class="real_icon real_icon_ie"> </i>  real_icon_ie（ \e7bb）</span>
 <span> <i class="real_icon real_icon_camera_fill"> </i>  real_icon_camera_fill（ \e65d）</span>  <span> <i class="real_icon real_icon_ios"> </i>  real_icon_ios（ \e680）</span>  <span> <i class="real_icon real_icon_edge"> </i>  real_icon_edge（ \e68b）</span>  <span> <i class="real_icon real_icon_login_weibo"> </i>  real_icon_login_weibo（ \e675）</span>  <span> <i class="real_icon real_icon_login_qq"> </i>  real_icon_login_qq（ \e676）</span>  <span> <i class="real_icon real_icon_android"> </i>  real_icon_android（ \e684）</span>  <span> <i class="real_icon real_icon_login_wechat"> </i>  real_icon_login_wechat（ \e677）</span>
 <span> <i class="real_icon real_icon_component"> </i>  real_icon_component（ \e857）</span>
 <span> <i class="real_icon real_icon_camera"> </i>  real_icon_camera（ \e660）</span>
 <span> <i class="real_icon real_icon_fonts_html"> </i>  real_icon_fonts_html（ \e64b）</span>
 <span> <i class="real_icon real_icon_website"> </i>  real_icon_website（ \e7ae）</span>
 <span> <i class="real_icon real_icon_code_circle"> </i>  real_icon_code_circle（ \e635）</span>
 <span> <i class="real_icon real_icon_dialogue"> </i>  real_icon_dialogue（ \e63a）</span>
 <span> <i class="real_icon real_icon_print"> </i>  real_icon_print（ \e66d）</span>  <span> <i class="real_icon real_icon_music"> </i>  real_icon_music（ \e690）</span>
 <span> <i class="real_icon real_icon_mike"> </i>  real_icon_mike（ \e6dc）</span>  <span> <i class="real_icon real_icon_speaker"> </i>  real_icon_speaker（ \e645）</span>  <span><i class="real_icon real_icon_reply_fill"> </i>  real_icon_reply_fill（ \e611）</span>
 <span> <i class="real_icon real_icon_email"> </i>  real_icon_email（ \e618）</span>  <span> <i class="real_icon real_icon_rss"> </i>  real_icon_rss（ \e808）</span>  <span> <i class="real_icon real_icon_wifi"> </i>  real_icon_wifi（ \e7e0）</span>
 <span> <i class="real_icon real_icon_bluetooth"> </i>  real_icon_bluetooth（ \e689）</span>
 <span><i class="real_icon real_icon_release"> </i>  real_icon_release（ \e609）</span>
 <span> <i class="real_icon real_icon_location"> </i>  real_icon_location（ \e715）</span>
 <span><i class="real_icon real_icon_chat"> </i>  real_icon_chat（ \e606）</span> 
                                </div>
                                <div>
                                     <h3>箭头</h3>
 <span>   <i class="real_icon real_icon_right"> </i>  real_icon_right（ \e602）</span>
 <span>  <i class="real_icon real_icon_left"> </i>  real_icon_left（ \e603）</span>
 <span>   <i class="real_icon real_icon_down"> </i>  real_icon_down（ \e61a）</span>
 <span>  <i class="real_icon real_icon_up"> </i>  real_icon_up（ \e619）</span>  <span> <i class="real_icon real_icon_return"> </i>  real_icon_return（ \e65c）</span>  <span> <i class="real_icon real_icon_prev"> </i>  real_icon_prev（ \e65a）</span>  <span> <i class="real_icon real_icon_next"> </i>  real_icon_next（ \e65b）</span>  <span> <i class="real_icon real_icon_triangle_r"> </i>  real_icon_triangle_r（ \e623）</span>
 <span> <i class="real_icon real_icon_triangle_d"> </i>  real_icon_triangle_d（ \e625）</span> 
                                </div>
                                <div>
                                     <h3>物体</h3>
 <span> <i class="real_icon real_icon_light"> </i>  real_icon_light（ \e748）</span>
 <span> <i class="real_icon real_icon_water"> </i>  real_icon_water（ \e636）</span>  <span> <i class="real_icon real_icon_senior"> </i>  real_icon_senior（ \e674）</span>
 <span> <i class="real_icon real_icon_snowflake"> </i>  real_icon_snowflake（ \e6b1）</span>
 <span> <i class="real_icon real_icon_tree"> </i>  real_icon_tree（ \e62e）</span>
 <span> <i class="real_icon real_icon_cellphone_fine"> </i>  real_icon_cellphone_fine（ \e63b）</span>
 <span> <i class="real_icon real_icon_cellphone"> </i>  real_icon_cellphone（ \e678）</span>
 <span>  <i class="real_icon real_icon_read"> </i>  real_icon_read（ \e705）</span>

                                </div>
                                <div>
                                     <h3>表情</h3>
 <span> 
    	 <i class="real_icon real_icon_face_cry"> </i>  real_icon_face_cry（ \e69c）</span><span>  
    	 <i class="real_icon real_icon_face_smile"> </i>  real_icon_face_smile（ \e6af）</span><span> 
    	 <i class="real_icon real_icon_face_surprised"> </i>  real_icon_face_surprised（ \e664）</span>
 <span> <i class="real_icon real_icon_face_smile_fine"> </i>  real_icon_face_smile_fine（ \e60c）</span>
 <span> <i class="real_icon real_icon_face_smile_b"> </i>  real_icon_face_smile_b（ \e650）</span> 
                                </div>
                                <div>
                                     <h3>多媒体</h3>
 <span> <i class="real_icon real_icon_mute"> </i>  real_icon_mute（ \e685）</span>
 <span> <i class="real_icon real_icon_logout"> </i>  real_icon_logout（ \e682）</span>
 <span> <i class="real_icon real_icon_video"> </i>  real_icon_video（ \e6ed）</span>
 <span> <i class="real_icon real_icon_pause"> </i>  real_icon_pause（ \e651）</span>
 <span> <i class="real_icon real_icon_carousel"> </i>  real_icon_carousel（ \e634）</span>
 <span><i class="real_icon real_icon_play"> </i>  real_icon_play（ \e652）</span>
 <span> <i class="real_icon real_icon_screen_full"> </i>  real_icon_screen_full（ \e622）</span>
 <span> <i class="real_icon real_icon_screen_restore"> </i>  real_icon_screen_restore（ \e758）</span>
 <span> <i class="real_icon real_icon_picture_fine"> </i>  real_icon_picture_fine（ \e60d）</span>
 <span> <i class="real_icon real_icon_picture"> </i>  real_icon_picture（ \e64a）</span> 
                                </div>
                                <div>
                                     <h3>对错</h3>
 <span> <i class="real_icon real_icon_tips"> </i>  real_icon_tips（ \e685）</span>
 <span> <i class="real_icon real_icon_about"> </i>  real_icon_about（ \e682）</span>
 <span> <i class="real_icon real_icon_ok_circle"> </i>  real_icon_ok_circle（ \e6ed）</span>
 <span> <i class="real_icon real_icon_ok"> </i>  real_icon_ok（ \e605）</span> 	<span> <i class="real_icon real_icon_close"> </i>  real_icon_close（ \1006）</span><span>
    	 <i class="real_icon real_icon_close_fill"> </i>  real_icon_close_fill（ \1007）</span>

                                </div>
                                <div>
                                     <h3>其他</h3>		<span> <i class="real_icon real_icon_cart_simple"> </i>  real_icon_cart_simple（ \e698）</span>
 <span>
    	 <i class="real_icon real_icon_menu_fill"> </i>  real_icon_set_fill（ \e60f）</span><span>
    	 <i class="real_icon real_icon_search"> </i>  real_icon_search（ \e615）</span><span>
    	 <i class="real_icon real_icon_share"> </i>  real_icon_share（ \e641）</span><span>
    	 <i class="real_icon real_icon_engine"> </i>  real_icon_engine（ \e628）</span><span>
    	 <i class="real_icon real_icon_chart_screen"> </i>  real_icon_chart_screen（ \e629）</span><span>
    	 <i class="real_icon real_icon_star"> </i>  real_icon_star（ \e600）</span><span>
    	 <i class="real_icon real_icon_circle_dot"> </i>  real_icon_circle_dot（ \e617）</span><span>   
    	 <i class="real_icon real_icon_list"> </i>  real_icon_list（ \e60a）</span><span>  
    	 <i class="real_icon real_icon_chart"> </i>  real_icon_chart（ \e62c）</span><span>  
    	 <i class="real_icon real_icon_layim_theme"> </i>  real_icon_layim_theme（ \e61b）</span><span>  
    	 <i class="real_icon real_icon_table"> </i>  real_icon_table（ \e62d）</span>  <span> <i class="real_icon real_icon_templeate_1"> </i>  real_icon_templeate_1（ \e630）</span>  <span><i class="real_icon real_icon_survey"> </i>  real_icon_survey（ \e6b2）</span>
 <span> <i class="real_icon real_icon_upload_circle"> </i>  real_icon_upload_circle（ \e62f）</span><span> 
    	 <i class="real_icon real_icon_add_circle"> </i>  real_icon_add_circle（ \e61f）</span><span>   
    	 <i class="real_icon real_icon_download_circle"> </i>  real_icon_download_circle（ \e601）</span>  <span> 
    	 <i class="real_icon real_icon_add_circle_fine"> </i>  real_icon_add_circle_fine（ \e608）</span>  <span> 
    	 <i class="real_icon real_icon_layim_uploadfile"> </i>  real_icon_layim_uploadfile（ \e61d）</span>
 <span><i class="real_icon real_icon_edit"> </i>  real_icon_edit（ \e642）</span><span>  
    	 <i class="real_icon real_icon_delete"> </i>  real_icon_delete（ \e640）</span>  <span> 
    	 <i class="real_icon real_icon_refresh_3"> </i>  real_icon_refresh_3（ \e9aa）</span>  <span>     
    	 <i class="real_icon real_icon_file"> </i>  real_icon_file（ \e621）</span><span>   
    	 <i class="real_icon real_icon_layouts"> </i>  real_icon_layouts（ \e632）</span><span> 
    	 <i class="real_icon real_icon_rate_half"> </i>  real_icon_rate_half（ \e6c9）</span><span> 
    	 <i class="real_icon real_icon_prev_circle"> </i>  real_icon_prev_circle（ \e633）</span><span> 
    	 <i class="real_icon real_icon_404"> </i>  real_icon_404（ \e61c）</span><span> 
    	 <i class="real_icon real_icon_help"> </i>  real_icon_help（ \e607）</span>
 <span> 
    	 <i class="real_icon real_icon_date"> </i>  real_icon_date（ \e637）</span><span>  
    	 <i class="real_icon real_icon_top"> </i>  real_icon_top（ \e604）</span>  <span> <i class="real_icon real_icon_layer"> </i>  real_icon_layer（ \e638）</span>  <span> <i class="real_icon real_icon_dollar"> </i>  real_icon_dollar（ \e659）</span>  <span> <i class="real_icon real_icon_layim_download"> </i>  real_icon_layim_download（ \e61e）</span>
 <span> <i class="real_icon real_icon_link"> </i>  real_icon_link（ \e64c）</span>
 <span> <i class="real_icon real_icon_diamond"> </i>  real_icon_diamond（ \e735）</span>
 <span> <i class="real_icon real_icon_log"> </i>  real_icon_log（ \e60e）</span>
 <span> <i class="real_icon real_icon_key"> </i>  real_icon_key（ \e683）</span>
 <span> <i class="real_icon real_icon_rate_solid"> </i>  real_icon_rate_solid（ \e67a）</span>
 <span> <i class="real_icon real_icon_fonts_del"> </i>  real_icon_fonts_del（ \e64f）</span>
 <span> <i class="real_icon real_icon_unlink"> </i>  real_icon_unlink（ \e64d）</span>
 <span> <i class="real_icon real_icon_fonts_clear"> </i>  real_icon_fonts_clear（ \e639）</span>
 <span> <i class="real_icon real_icon_circle"> </i>  real_icon_circle（ \e63f）</span>
 <span> <i class="real_icon real_icon_radio"> </i>  real_icon_radio（ \e643）</span>  <span> <i class="real_icon real_icon_align_center"> </i>  real_icon_align_center（ \e647）</span>  <span> <i class="real_icon real_icon_align_right"> </i>  real_icon_align_right（ \e648）</span>  <span> <i class="real_icon real_icon_align_left"> </i>  real_icon_align_left（ \e649）</span>  <span> <i class="real_icon real_icon_loading_1"> </i>  real_icon_loading_1（ \e63e）</span>  <span> <i class="real_icon real_icon_fonts_strong"> </i>  real_icon_fonts_strong（ \e62b）</span>  <span> <i class="real_icon real_icon_upload"> </i>  real_icon_upload（ \e67c）</span>  <span> <i class="real_icon real_icon_headset"> </i>  real_icon_headset（ \e6fc）</span>  <span> <i class="real_icon real_icon_add_1"> </i>  real_icon_add_1（ \e654）</span>  <span> <i class="real_icon real_icon_form"> </i>  real_icon_form（ \e63c）</span>  <span> <i class="real_icon real_icon_cart"> </i>  real_icon_cart（ \e657）</span>  <span> <i class="real_icon real_icon_tabs"> </i>  real_icon_tabs（ \e62a）</span>  <span> <i class="real_icon real_icon_heart_fill"> </i>  real_icon_heart_fill（ \e68f）</span>  <span> <i class="real_icon real_icon_fonts_i"> </i>  real_icon_fonts_i（ \e64e）</span>  <span> <i class="real_icon real_icon_at"> </i>  real_icon_at（ \e687）</span>  <span> <i class="real_icon real_icon_fire"> </i>  real_icon_fire（ \e756）</span>  <span> <i class="real_icon real_icon_fonts_u"> </i>  real_icon_fonts_u（ \e646）</span>  <span> <i class="real_icon real_icon_more_vertical"> </i>  real_icon_more_vertical（ \e671）</span>  <span> <i class="real_icon real_icon_flag"> </i>  real_icon_flag（ \e66c）</span>  <span> <i class="real_icon real_icon_loading"> </i>  real_icon_loading（ \e63d）</span>  <span> <i class="real_icon real_icon_fonts_i"> </i>  real_icon_fonts_i（ \e644）</span>  <span> <i class="real_icon real_icon_refresh_1"> </i>  real_icon_refresh_1（ \e666）</span>  <span> <i class="real_icon real_icon_rmb"> </i>  real_icon_rmb（ \e65e）</span>  <span> <i class="real_icon real_icon_addition"> </i>  real_icon_addition（ \e624）</span>  <span> <i class="real_icon real_icon_home"> </i>  real_icon_home（ \e68e）</span>  <span> <i class="real_icon real_icon_time"> </i>  real_icon_time（ \e68d）</span>  <span> <i class="real_icon real_icon_notice"> </i>  real_icon_notice（ \e667）</span>  <span> <i class="real_icon real_icon_voice"> </i>  real_icon_voice（ \e688）</span>  <span> <i class="real_icon real_icon_upload_drag"> </i>  real_icon_upload_drag（ \e681）</span>  <span> <i class="real_icon real_icon_heart"> </i>  real_icon_heart（ \e68c）</span>  <span> <i class="real_icon real_icon_file_b"> </i>  real_icon_file_b（ \e655）</span>  <span> <i class="real_icon real_icon_template"> </i>  real_icon_template（ \e663）</span>  <span> <i class="real_icon real_icon_transfer"> </i>  real_icon_transfer（ \e691）</span>  <span> <i class="real_icon real_icon_auz"> </i>  real_icon_auz（ \e672）</span>  <span> <i class="real_icon real_icon_console"> </i>  real_icon_console（ \e665）</span>  <span> <i class="real_icon real_icon_app"> </i>  real_icon_app（ \e653）</span>  <span> <i class="real_icon real_icon_more"> </i>  real_icon_more（ \e65f）</span>  <span> <i class="real_icon real_icon_shrink_right"> </i>  real_icon_shrink_right（ \e668）</span>  <span> <i class="real_icon real_icon_spread_left"> </i>  real_icon_spread_left（ \e66b）</span>  <span> <i class="real_icon real_icon_note"> </i>  real_icon_note（ \e66e）</span>  <span> <i class="real_icon real_icon_refresh"> </i>  real_icon_refresh（ \e669）</span>  <span> <i class="real_icon real_icon_female"> </i>  real_icon_female（ \e661）</span>  <span> <i class="real_icon real_icon_male"> </i>  real_icon_male（ \e662）</span>  <span> <i class="real_icon real_icon_password"> </i>  real_icon_password（ \e673）</span>  <span> <i class="real_icon real_icon_theme"> </i>  real_icon_theme（ \e66a）</span>  <span> <i class="real_icon real_icon_tread"> </i>  real_icon_tread（ \e6c5）</span>  <span> <i class="real_icon real_icon_praise"> </i>  real_icon_praise（ \e6c6）</span>  <span> <i class="real_icon real_icon_star_fill"> </i>  real_icon_star_fill（ \e658）</span>  <span> <i class="real_icon real_icon_rate"> </i>  real_icon_rate（ \e67b）</span>  <span> <i class="real_icon real_icon_template_1"> </i>  real_icon_template_1（ \e656）</span>  <span> <i class="real_icon real_icon_vercode"> </i>  real_icon_vercode（ \e679）</span>  <span> <i class="real_icon real_icon_service"> </i>  real_icon_service（ \e626）</span>  <span> <i class="real_icon real_icon_cols"> </i>  real_icon_cols（ \e610）</span>  <span> <i class="real_icon real_icon_export"> </i>  real_icon_export（ \e67d）</span>  <span> <i class="real_icon real_icon_subtraction"> </i>  real_icon_subtraction（ \e67e）</span>  <span> <i class="real_icon real_icon_gift"> </i>  real_icon_gift（ \e627）</span>  <span> <i class="real_icon real_icon_reduce_circle"> </i>  real_icon_reduce_circle（ \e616）</span> 
                                </div>
                            </div>
                            <div class="precode"></div>
                        </div>
                        <!--table-real-row-->
                    </div>
                    <!--font-->
                    <div id="font" class="maindiv" style="    clear: both;">
                        <div class="page_tit">字号 &lt;font&gt;</div>
                        <div class="table-real-row">
                            <table class="real-table">
                                <tbody>
                                    <tr>
                                        <th>层级</th>
                                        <th>字体大小</th>
                                        <th class="color-dark-light">举例</th>
                                    </tr>
                                    <tr style="font-size: 12px;">
                                        <td>辅助文字</td>
                                        <td class="color-dark-light">12px Extra Small</td>
                                        <td>用 real 快速搭建页面</td>
                                    </tr>
                                    <tr style="font-size: 13px;">
                                        <td>正文（小）</td>
                                        <td class="color-dark-light">13px Small</td>
                                        <td>用 real 快速搭建页面</td>
                                    </tr>
                                    <tr style="font-size: 14px;">
                                        <td>正文</td>
                                        <td class="color-dark-light">14px Base</td>
                                        <td>用 real 快速搭建页面</td>
                                    </tr>
                                    <tr style="font-size: 16px;">
                                        <td>小标题</td>
                                        <td class="color-dark-light">16px Medium</td>
                                        <td>用 real 快速搭建页面</td>
                                    </tr>
                                    <tr style="font-size: 18px;">
                                        <td>标题</td>
                                        <td class="color-dark-light">18px large</td>
                                        <td>用 real 快速搭建页面</td>
                                    </tr>
                                    <tr style="font-size: 20px;">
                                        <td>主标题</td>
                                        <td class="color-dark-light">20px Extra large</td>
                                        <td>用 real 快速搭建页面</td>
                                    </tr>
                                </tbody>
                            </table>
                             <h3>字间距 &lt;font&gt;</h3>

                            <div style="margin:15px;">
                                <img src=""
                                style="float:left">
                                <ul style="float:right">
                                    <li>line-height:1 <span>无行高</span>

                                    </li>
                                    <li>line-height:1.3 <span>紧凑</span>

                                    </li>
                                    <li>line-height:1.5 <span>常规</span>

                                    </li>
                                    <li>line-height:1.7 <span>宽松</span>

                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--table-real-row-->
                    </div>
                    <!--link-->
                    <div id="link" class="maindiv">
                        <div class="page_tit">链接 &lt;link&gt;</div>
                        <div class="table-real-row">
                             <h3>链接</h3>

                            <div style="margin:15px;"> <a class="inner" target="_blank">默认链接</a>
 <a class="primary" style="padding:15px;">主要链接</a>
 <a class="success" style="padding:15px;">成功链接</a>
 <a class="warning" style="padding:15px;">警告链接</a>
 <a class="danger" style="padding:15px;">危险链接</a>
 <a class="info"
                                style="padding:15px;">信息链接</a>

                            </div>
                             <h3>禁用</h3>

                            <div style="margin:15px;"> <a class="inner-disabled" style="padding:15px;">默认链接</a>
 <a class="primary-disabled" style="padding:15px;">主要链接</a>
 <a class="success-disabled" style="padding:15px;">成功链接</a>
 <a class="warning-disabled" style="padding:15px;">警告链接</a>
 <a class="danger-disabled"
                                style="padding:15px;">危险链接</a>
 <a class="info-disabled" style="padding:15px;">信息链接</a>

                            </div>
                             <h3>下划线</h3> 
                            <div style="margin:15px;"> <a classe="no-underline">无下划线</a>
 <a class="underline">有下划线</a>
 <a class="danger underline">有下划线</a>

                            </div>
                        </div>
                        <!--table-real-row-->
                    </div>
                    <div id="button" class="maindiv">
                        <div class="page_tit">按钮 &lt;button&gt;</div>
                        <div class="table-real-row">
                             <h3>普通按钮</h3>

                            <button class="real-button Bg-Green Bg-Green-h">Bg-Green、Bg-Green-h</button>
                            <button class="real-button Bg-Blue Bg-Blue-h">Bg-Blue、Bg-Blue-h</button>
                            <button class="real-button Bg-Warning Bg-Warning-h">Bg-Warning、Bg-Warning-h</button>
                            <button class="real-button Bg-Red Bg-Red-h">Bg-Red、Bg-Red-h</button>
                            <button class="real-button Bg-Gray Bg-Gray-h">Bg-Gray、Bg-Gray-h</button>
                            <button class="real-button Bg-Black Bg-Black-h">Bg-Black、Bg-Black-h</button>
                            <button class="real-button Bg-Orange Bg-Orange-h">Bg-Orange、Bg-Orange-h</button>
                             <h3>普通按钮</h3>

                            <p>
                                <button class="real-button">默认按钮</button>
                                <button class="real-button real-blue">蓝色按钮</button>
                                <button class="real-button real-rem">蓝色按钮</button>
                                <button class="real-button real-red">红色按钮</button>
                                <button class="real-button real-yellow">黄色按钮</button>
                                <button class="real-button real-green">绿色按钮</button>
                                <button class="real-button real-black">黑色按钮</button>
                                <button class="real-button real-rem">蓝色2按钮</button>
                            </p>
                             <h3>新elemefe风格按钮</h3>

                            <p>
                                <button class="real-button real-plain-blue">蓝色按钮</button>
                                <button class="real-button real-plain-red">红色按钮</button>
                                <button class="real-button real-plain-yellow">黄色按钮</button>
                                <button class="real-button real-plain-green">绿色按钮</button>
                                <button class="real-button real-plain-black">黑色按钮</button>
                            </p>
                             <h3>新elemefe风格按钮</h3>

                            <p>
                                <button class="real-button real-new-blue">蓝色按钮</button>
                                <button class="real-button real-new-red">红色按钮</button>
                                <button class="real-button real-new-yellow">黄色按钮</button>
                                <button class="real-button real-new-green">绿色按钮</button>
                                <button class="real-button real-new-black">黑色按钮</button>
                            </p>
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">Bg-Green、Bg-Green-h</span>&quot;&gt;按钮&lt;/button&gt;&lt;--Bg-Green、Bg-Green-h--&gt</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                            </div>
                             <h3>圆角按钮</h3> 
                            <button class="real-button real-new-blue radius0">蓝色按钮</button>
                            <button class="real-button real-new-red radius1">红色按钮</button>
                            <button class="real-button real-new-yellow radius2">黄色按钮</button>
                            <button class="real-button real-new-green radius3">绿色按钮</button>
                            <button class="real-button real-new-black radius4">黑色按钮</button>
                            <button class="real-button real-new-black radius5">黑色按钮</button>
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">real-round</span>&quot;&gt;按钮&lt;/button&gt;&lt;--默认圆角--&gt</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                             <h3>禁用按钮</h3> 
                            <button class="real-button real-disabled">模拟禁用按钮</button>
                            <button class="real-button" disabled="disabled">真禁用按钮</button>
                            <button class="button Bg-Green disabled">disabled</button>
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;button class=&quot;real-button <span class="red">real-disabled</span>&quot;&gt;按钮&lt;/button&gt;&lt;--模拟禁用按钮--&gt</span>
                                    </li>
                                    <li><span>&lt;button class=&quot;real-button&quot; <span class="red">disabled="disabled"</span>&gt;按钮&lt;/button&gt;&lt;--真禁用按钮--&gt</span>
                                    </li>
                                    <li><span>&lt;button class=&quot;real-button disabled&quot;  &gt;按钮&lt;/button&gt;&lt;--禁用按钮--&gt</span> 
                                    </li>
                                </ol>
                                <div class="precode"></div>
                            </div>
                            <!--precopy-->
                        </div>
                         <h3>大小尺寸按钮</h3> 
                        <button class="real-button real-lit">小尺寸按钮</button>
                        <button class="real-button real-ful">宽度100%按钮</button>
                         <h4>字体大小</h4>

                        <button class="button Bg-Green  size1">Bg-Green、size1</button>
                        <button class="button Bg-Blue  size2">Bg-Blue、size2</button>
                        <button class="button Bg-Warning  size3">Bg-Warning、size3</button>
                        <button class="button Bg-Red  size4">Bg-Red、size4</button>
                        <button class="button Bg-Gray size5">Bg-Gray、size5</button>
                        <div class="pre">
                            <ol>
                                <li><span>&lt;button class=&quot;real-button <span class="red">real-lit</span>&quot; &gt;按钮&lt;/button&gt;&lt;--小尺寸按钮--&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">real-ful</span>&quot;&gt;按钮&lt;/button&gt;&lt;--宽度100%按钮--&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">size1</span>&quot;&gt;按钮&lt;/button&gt;&lt;--字体大小1--&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">size2</span>&quot;&gt;按钮&lt;/button&gt;&lt;--字体大小1--&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">size3</span>&quot;&gt;按钮&lt;/button&gt;&lt;--字体大小1--&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">size4</span>&quot;&gt;按钮&lt;/button&gt;&lt;--字体大小1--&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">size5</span>&quot;&gt;按钮&lt;/button&gt;&lt;--字体大小1--&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">size1</span>&quot;&gt;按钮&lt;/button&gt;&lt;--字体大小1--&gt</span>
                                </li>
                            </ol>
                            <div class="precode"></div>
                            <!--precopy-->
                        </div>
                        <!-- <button class="real-button real-blue real-round">组合样式（蓝色+圆角）按钮</button>
                                    &lt;button class=&quot;real-button <span class="red">real-blue real-round</span>&quot;&gt;按钮&lt;/button&gt;
              -->
                         <h3>阴影大小</h3>

                        <button class="button Bg-Green  shadow1">Bg-Green、shadow1</button>
                        <button class="button Bg-Blue  shadow2">Bg-Blue、shadow2</button>
                        <div class="pre" style="margin-top:30px">
                            <ol>
                                <li><span>&lt;button class=&quot;real-button <span class="red">shadow1</span>&quot; &gt;按钮&lt;/button&gt;</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">shadow2</span>&quot;&gt;按钮&lt;/button&gt;&lt;----&gt</span>
                                </li>
                            </ol>
                            <div class="precode"></div>
                            <!--precopy-->
                        </div>
                         <h3>边框效果样式</h3> 
                        <button class="real-button bor-green bor-color-h3">bor-green、bor-color-h3</button>
                        <button class="real-button bor-blue bor-color-h2">bor-blue、bor-color-h2</button>
                        <button class="real-button bor-red bor-color-h3">bor-red、bor-color-h3</button>
                        <button class="real-button bor-gray bor-color-h4">bor-gray、bor-color-h4</button>
                        <button class="real-button bor-black bor-color-h5">bor-black、bor-color-h5</button>
                        <button class="real-button bor-warning bor-color-h6">bor-warning、bor-color-h6</button>
                        <button class="real-button bor-Orange bor-Orange-h">bor-Orange、bor-Orange-h</button>
                        <div class="pre">
                            <ol>
                                <li><span>&lt;button class=&quot;real-button <span class="red">bor-green bor-color-h3</span>&quot; &gt;按钮&lt;/button&gt;</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">bor-blue、bor-color-h2</span>&quot;&gt;按钮&lt;/button&gt;&lt;----&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">bor-red、bor-color-h3</span>&quot;&gt;按钮&lt;/button&gt;&lt;----&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">bor-gray、bor-color-h4</span>&quot;&gt;按钮&lt;/button&gt;&lt;----&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">bor-black、bor-color-h5</span>&quot;&gt;按钮&lt;/button&gt;&lt;----&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">bor-warning、bor-color-h6</span>&quot;&gt;按钮&lt;/button&gt;&lt;----&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot;real-button <span class="red">bor-Orange、bor-Orange-h</span>&quot;&gt;按钮&lt;/button&gt;&lt;----&gt</span>
                                </li>
                            </ol>
                            <div class="precode"></div>
                            <!--precopy-->
                        </div>
                         <h3>按键动画</h3>

                        <button class="button Bg-Green  button-after"><span>Bg-Green、button-after</span>

                        </button>
                        <button class="button Bg-Blue  button-after2">Bg-Blue、button-after2</button>
                        <div class="pre">
                            <ol>
                                <li><span>&lt;button class=&quot; button <span class="red">Bg-Green  button-after</span>&quot; &gt;按钮&lt;/button&gt;&lt;--Bg-Green button-after--&gt</span>
                                </li>
                                <li><span>&lt;button class=&quot; button <span class="red">Bg-Green  button-after2</span>&quot;&gt;按钮&lt;/button&gt;&lt;--Bg-Green button-after2--&gt</span>
                                </li>
                            </ol>
                            <div class="precode"></div>
                            <!--precopy-->
                        </div>
                    </div>
                    <!--button-->
                    <!--form-->
                    <div id="form" class="maindiv">
                        <div class="page_tit">表单 &lt;form&gt;</div>
                        <div class="table-real-row real-button bor-gray radius2" style="width:100%">
                            <div class="real-row">
                                <div class="real-col-4" style="line-height: 34px;">文本框</div>
                                <div class="real-col-20 ">
                                    <input class="real-input real-round" type="text" placeholder="圆角样式" />
                                </div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-4" style="line-height: 34px;">开关</div>
                                <div class="real-col-20 ">
                                    <input class="real-switch  real-blue" type="checkbox" checked="checked" name="checkbox1" />
                                </div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-4" style="line-height: 34px;">开关2</div>
                                <div class="real-col-20 ">
                                    <input class="real-switch real-onoff  real-blue" type="checkbox" checked="checked" name="checkbox1" />
                                </div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-4" style="line-height: 34px;">上传</div>
                                <div class="real-col-20 "> <span class="real-file real-lit  real-blue">
                                    <input type="file" />
                                    <span><i></i>默认样式</span>
</span>
                                </div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-4" style="line-height: 34px;">下拉</div>
                                <div class="real-col-20 ">
                                    <select class="real-select real-round">
                                        <option>选项1</option>
                                        <option>选项2</option>
                                        <option>选项3</option>
                                    </select>
                                </div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-4" style="line-height: 34px;">单选框</div>
                                <div class="real-col-20 "> <span class="real-radio">
                                        <label>
                                        <input type="radio" name="radio1" checked="checked" /><em></em>
                                        <span>默认样式</span>

                                    </label>
                                    </span> <span class="real-radio real-blue">
                                        <label>
                                        <input type="radio" name="radio1" /><em></em>
                                        <span>默认样1</span>

                                    </label>
                                    </span> <span class="real-radio real-blue">
                                        <label>
                                        <input type="radio" name="radio1" /><em></em>
                                        <span>默认样式2</span>

                                    </label>
                                    </span>
                                </div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-4" style="line-height: 34px;">复选框</div>
                                <div class="real-col-20 "> <span class="real-checkbox">
                                        <label>
                                        <input type="checkbox" name="checkbox1[]" checked="checked" /><em></em>
                                        <span>有文字描述</span>

                                    </label>
                                    </span> <span class="real-checkbox">
                                        <label>
                                        <input type="checkbox" name="checkbox1[]" /><em></em>
                                        <span>有文字描述</span>

                                    </label>
                                    </span> <span class="real-checkbox">
                                        <label>
                                        <input type="checkbox" name="checkbox1[]" /><em></em>
                                        <span>有文字描述</span>

                                    </label>
                                    </span>
                                </div>
                            </div>
                            <div class="real-row">
                                <div class="real-col-4" style="line-height: 34px;">复选框</div>
                                <div class="real-col-20 ">
                                    <textarea class="real-text real-ful"></textarea>
                                </div>
                            </div>
                            <div class="real-row">
                                <button class="real-button real-new-blue">按钮</button>
                                <!--默认圆角-->
                                <button class="real-button real-new-green">确定</button>
                                <!--默认圆角-->
                                <button class="real-button real-new-black">重置</button>
                                <!--默认圆角-->
                            </div>
                        </div>
                        <!--ereal-ample-->
                        <div class="pre">
                            <ol>
                                <li><span>&lt;div class=&quot;real-row&quot;&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-4&quot; style=&quot;line-height: 34px;&quot;&gt; 文本框 &lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-20 &quot; &gt;</span>

                                </li>
                                <li><span>&lt;input class=&quot;real-input real-round&quot; type=&quot;text&quot; placeholder=&quot;圆角样式&quot; /&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-row&quot;&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-4&quot; style=&quot;line-height: 34px;&quot;&gt; 开关 &lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-20 &quot; &gt;</span>

                                </li>
                                <li><span>&lt;input class=&quot;real-switch&quot; type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-row&quot;&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-4&quot; style=&quot;line-height: 34px;&quot;&gt; 开关1 &lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-20 &quot; &gt;</span>

                                </li>
                                <li><span>&lt;input class=&quot;real-switch real-onoff&quot; type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-row&quot;&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-4&quot; style=&quot;line-height: 34px;&quot;&gt; 下拉 &lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-20 &quot; &gt;</span>

                                </li>
                                <li><span>&lt;select class=&quot;real-select real-round&quot;&gt;</span>

                                </li>
                                <li><span>&lt;option&gt; 选项1 &lt;/option&gt;</span>

                                </li>
                                <li><span>&lt;option&gt; 选项2 &lt;/option&gt;</span>

                                </li>
                                <li><span>&lt;option&gt; 选项3 &lt;/option&gt;</span>

                                </li>
                                <li><span>&lt;/select&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-row&quot;&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-4&quot; style=&quot;line-height: 34px;&quot;&gt;  单选框 &lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-20 &quot; &gt;</span>

                                </li>
                                <li><span>&lt;span class=&quot;real-radio real-blue&quot;&gt;</span>

                                </li>
                                <li><span>&lt;label&gt;</span>

                                </li>
                                <li><span>&lt;input type=&quot;radio&quot; name=&quot;radio1&quot; /&gt;</span>

                                </li>
                                <li><span>&lt;em&gt;</span>

                                </li>
                                <li><span>&lt;/em&gt;</span>

                                </li>
                                <li><span>&lt;span&gt; 默认样式 &lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;/label&gt;</span>

                                </li>
                                <li><span>&lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;span class=&quot;real-radio real-blue&quot;&gt;</span>

                                </li>
                                <li><span>&lt;label&gt;</span>

                                </li>
                                <li><span>&lt;input type=&quot;radio&quot; name=&quot;radio1&quot; /&gt;</span>

                                </li>
                                <li><span>&lt;em&gt;</span>

                                </li>
                                <li><span>&lt;/em&gt;</span>

                                </li>
                                <li><span>&lt;span&gt; 默认样1 &lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;/label&gt;</span>

                                </li>
                                <li><span>&lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;span class=&quot;real-radio real-blue&quot;&gt;</span>

                                </li>
                                <li><span>&lt;label&gt;</span>

                                </li>
                                <li><span>&lt;input type=&quot;radio&quot; name=&quot;radio1&quot; /&gt;</span>

                                </li>
                                <li><span>&lt;em&gt;</span>

                                </li>
                                <li><span>&lt;/em&gt;</span>

                                </li>
                                <li><span>&lt;span&gt; 默认样式2 &lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;/label&gt;</span>

                                </li>
                                <li><span>&lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-row&quot;&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-4&quot; style=&quot;line-height: 34px;&quot;&gt;  复选框 &lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;div class=&quot;real-col-20 &quot; &gt;</span>

                                </li>
                                <li><span>&lt;span class=&quot;real-checkbox&quot;&gt;</span>

                                </li>
                                <li><span>&lt;label&gt;</span>

                                </li>
                                <li><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;</span>

                                </li>
                                <li><span>&lt;em&gt;</span>

                                </li>
                                <li><span>&lt;/em&gt;</span>

                                </li>
                                <li><span>&lt;span&gt; 有文字描述 &lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;/label&gt;</span>

                                </li>
                                <li><span>&lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;span class=&quot;real-checkbox&quot;&gt;</span>

                                </li>
                                <li><span>&lt;label&gt;</span>

                                </li>
                                <li><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;</span>

                                </li>
                                <li><span>&lt;em&gt;</span>

                                </li>
                                <li><span>&lt;/em&gt;</span>

                                </li>
                                <li><span>&lt;span&gt; 有文字描述 &lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;/label&gt;</span>

                                </li>
                                <li><span>&lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;span class=&quot;real-checkbox&quot;&gt;</span>

                                </li>
                                <li><span>&lt;label&gt;</span>

                                </li>
                                <li><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;</span>

                                </li>
                                <li><span>&lt;em&gt;</span>

                                </li>
                                <li><span>&lt;/em&gt;</span>

                                </li>
                                <li><span>&lt;span&gt; 有文字描述 &lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;/label&gt;</span>

                                </li>
                                <li><span>&lt;/span&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;/div&gt;</span>

                                </li>
                                <li><span>&lt;button class=&quot;real-button real-round&quot;&gt;按钮&lt;/button&gt;</span>

                                </li>
                            </ol>
                            <div class="precode"></div>
                            <!--precopy-->
                        </div>
                        <!--pre-->
                    </div>
                    <!--input-->
                    <div id="input" class="maindiv">
                        <div class="page_tit">文本框 &lt;input&gt;</div>
                        <div class="table-real-row">
                            <div class="page_tit2">默认样式</div>
                            <div class="page_tit3">长度为<span>200px</span>，高度为<span>34px</span>

                            </div>
                            <div class="ereal-ample">
                                <input class="real-input real-round" type="text" placeholder="圆角样式" />
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;input class=&quot;real-input real-round&quot; /&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">宽度</div>
                            <div class="page_tit3"><code>real-width3</code>长度为<span>250px</span>，每次增加<span>50px</span>

                            </div>
                            <div class="ereal-ample">
                                <input class="real-input real-width3" type="text" placeholder="real-width3: 250px" />
                                <input class="real-input real-width2" type="text" placeholder="real-width2: 300px" />
                                <br>
                                <br>
                                <input class="real-input real-width3" type="text" placeholder="real-width3: 350px" />
                                <input class="real-input real-width4" type="text" placeholder="real-width4: 400px" />
                                <br>
                                <br>
                                <input class="real-input real-width5" type="text" placeholder="real-width5: 450px" />
                                <br>
                                <br>
                                <input class="real-input real-width6" type="text" placeholder="real-width6: 500px" />
                                <br>
                                <br>
                                <input class="real-input real-ful" type="text" placeholder="100%宽度" />
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;input class=&quot;real-input <span>real-width3</span>&quot; /&gt;</span>
                                    </li>
                                    <li><span>&lt;input class=&quot;real-input <span>real-width2</span>&quot; /&gt;</span>
                                    </li>
                                    <li><span>&lt;input class=&quot;real-input <span>real-width3</span>&quot; /&gt;</span>
                                    </li>
                                    <li><span>&lt;input class=&quot;real-input <span>real-width4</span>&quot; /&gt;</span>
                                    </li>
                                    <li><span>&lt;input class=&quot;real-input <span>real-width5</span>&quot; /&gt;</span>
                                    </li>
                                    <li><span>&lt;input class=&quot;real-input <span>real-width6</span>&quot; /&gt;</span>
                                    </li>
                                    <li><span>&lt;input class=&quot;real-input <span>real-ful</span>&quot; /&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">高度</div>
                            <div class="page_tit3"><code>real-height1</code>高度为<span>38px</span>，每次增加<span>4px</span>

                            </div>
                            <div class="ereal-ample">
                                <input class="real-input real-height1" type="text" placeholder="real-height1: 38px" />
                                <input class="real-input real-height2" type="text" placeholder="real-height2: 42px" />
                                <input class="real-input real-height3" type="text" placeholder="real-height3: 46px" />
                                <input class="real-input real-height4" type="text" placeholder="real-height4: 50px" />
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;input class=&quot;real-input <span>real-height1</span>&quot; /&gt;</span>
                                    </li>
                                    <li><span>&lt;input class=&quot;real-input <span>real-height2</span>&quot; /&gt;</span>
                                    </li>
                                    <li><span>&lt;input class=&quot;real-input <span>real-height3</span>&quot; /&gt;</span>
                                    </li>
                                    <li><span>&lt;input class=&quot;real-input <span>real-height4</span>&quot; /&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">下划线</div>
                            <div class="ereal-ample">
                                <input class="real-input real-under" type="text" placeholder="下划线" />
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;input class=&quot;real-input <span>real-under</span>&quot; /&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">只读文本框</div>
                            <div class="ereal-ample">
                                <input class="real-input real-readonly" type="text" value="只读文本框" readonly="readonly" />
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;input class=&quot;real-input <span>real-readonly</span>&quot; readonly=&quot;readonly&quot; /&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                    </div>
                    <!--input-->
                    <div id="textarea" class="maindiv">
                        <div class="page_tit">文本域 &lt;textarea&gt;</div>
                        <div class="table-real-row">
                            <div class="page_tit2">默认样式</div>
                            <div class="page_tit3">长度为<span>200px</span>，高度为<span>80px</span>

                            </div>
                            <div class="ereal-ample">
                                <textarea class="real-text real-round" placeholder="圆角样式"></textarea>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;textarea class=&quot;real-text border-radius&quot;&gt;&lt;/textarea&gt;</span>

                                    </li>
                                </ol>
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">宽度</div>
                            <div class="page_tit3"><code>real-width3</code>长度为<span>250px</span>，每次增加<span>50px</span>

                            </div>
                            <div class="ereal-ample">
                                <textarea class="real-text real-width3" type="text" placeholder="real-width3: 250px"></textarea>
                                <textarea class="real-text real-width2" type="text" placeholder="real-width2: 300px"></textarea>
                                <br>
                                <br>
                                <textarea class="real-text real-width3" type="text" placeholder="real-width3: 350px"></textarea>
                                <textarea class="real-text real-width4" type="text" placeholder="real-width4: 400px"></textarea>
                                <br>
                                <br>
                                <textarea class="real-text real-width5" type="text" placeholder="real-width5: 450px"></textarea>
                                <br>
                                <br>
                                <textarea class="real-text real-width6" type="text" placeholder="real-width6: 500px"></textarea>
                                <br>
                                <br>
                                <textarea class="real-text real-ful" placeholder="100%宽度"></textarea>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-width3</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-width2</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-width3</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-width4</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-width5</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-width6</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-ful</span>&quot;&gt;&lt;/textarea&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">高度</div>
                            <div class="page_tit3"><code>real-height1</code>高度为<span>38px</span>，每次增加<span>20px</span>

                            </div>
                            <div class="ereal-ample">
                                <textarea class="real-text real-height1" type="text" placeholder="real-height1: 100px"></textarea>
                                <textarea class="real-text real-height2" type="text" placeholder="real-height2: 120px"></textarea>
                                <br>
                                <br>
                                <textarea class="real-text real-height3" type="text" placeholder="real-height3: 140px"></textarea>
                                <textarea class="real-text real-height4" type="text" placeholder="real-height4: 160px"></textarea>
                                <br>
                                <br>
                                <textarea class="real-text real-height5" type="text" placeholder="real-height5: 180px"></textarea>
                                <textarea class="real-text real-height6" type="text" placeholder="real-height6: 200px"></textarea>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-height1</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-height2</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-height3</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-height4</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-height5</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-height6</span>&quot; &gt;&lt;textarea&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">下划线</div>
                            <div class="ereal-ample">
                                <textarea class="real-text real-under" placeholder="下划线"></textarea>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;textarea class=&quot;real-text <span>real-under</span>&quot; &gt;&lt;/textarea&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                    </div>
                    <!--textarea-->
                    <div id="select" class="maindiv">
                        <div class="page_tit">下拉框 &lt;select&gt;</div>
                        <div class="table-real-row">
                            <div class="page_tit2">默认样式</div>
                            <div class="page_tit3">长度为<span>200px</span>，高度为<span>34px</span>

                            </div>
                            <div class="ereal-ample">
                                <select class="real-select real-round">
                                    <option>圆角样式</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;select class=&quot;real-select <span>real-round</span>&quot;&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span>

                                    </li>
                                    <li><span>&lt;/select&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">黑色样式</div>
                            <div class="page_tit3">border-radius为<span>5px</span>

                            </div>
                            <div class="ereal-ample">
                                <select class="real-select real-black real-round">
                                    <option>黑色样式</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;select class=&quot;real-select <span>real-black real-round</span>&quot;&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span>

                                    </li>
                                    <li><span>&lt;/select&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">宽度</div>
                            <div class="page_tit3"><code>real-width3</code>长度为<span>250px</span>，每次增加<span>50px</span>

                            </div>
                            <div class="ereal-ample">
                                <select class="real-select real-width3">
                                    <option>real-width3: 250px</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                                <select class="real-select real-width2">
                                    <option>real-width2: 300px</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                                <br>
                                <br>
                                <select class="real-select real-width3">
                                    <option>real-width3: 350px</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                                <select class="real-select real-width4">
                                    <option>real-width4: 400px</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                                <br>
                                <br>
                                <select class="real-select real-width5">
                                    <option>real-width5: 450px</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                                <br>
                                <br>
                                <select class="real-select real-width6">
                                    <option>real-width6: 500px</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                                <br>
                                <br>
                                <select class="real-select real-ful">
                                    <option>100%宽度 real-ful</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;select class=&quot;real-select <span>real-width3</span>&quot;&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span>

                                    </li>
                                    <li><span>&lt;/select&gt;</span>

                                    </li>
                                    <li><span>&lt;select class=&quot;real-select <span>real-ful</span>&quot;&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span>

                                    </li>
                                    <li><span>&lt;/select&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">高度</div>
                            <div class="page_tit3"><code>real-height1</code>高度为<span>38px</span>，每次增加<span>4px</span>

                            </div>
                            <div class="ereal-ample">
                                <select class="real-select real-height1">
                                    <option>real-height1: 38px</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                                <br>
                                <br>
                                <select class="real-select real-height2">
                                    <option>real-height2: 42px</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                                <br>
                                <br>
                                <select class="real-select real-height3">
                                    <option>real-height3: 46px</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                                <br>
                                <br>
                                <select class="real-select real-height4">
                                    <option>real-height4: 50px</option>
                                    <option>选项2</option>
                                    <option>选项3</option>
                                </select>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;select class=&quot;real-select <span>real-height1</span>&quot;&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                    </div>
                    <!--select-->
                    <div id="radio" class="maindiv">
                        <div class="page_tit">单选框 &lt;input type="radio"&gt;</div>
                        <div class="table-real-row">
                            <table class="ptable">
                                <tr class="first">
                                    <td width="160" real-rowspan="6" align="center"><strong>颜色表</strong>

                                    </td>
                                    <td>class</td>
                                </tr>
                                <tr>
                                    <td>蓝色</td>
                                    <td><code>real-blue</code>  <code>real-blue2</code>

                                    </td>
                                </tr>
                                <tr>
                                    <td>红色</td>
                                    <td><code>real-red</code>  <code>real-red2</code>

                                    </td>
                                </tr>
                                <tr>
                                    <td>黄色</td>
                                    <td><code>real-yellow</code>  <code>real-yellow2</code>

                                    </td>
                                </tr>
                                <tr>
                                    <td>绿色</td>
                                    <td><code>real-green</code>  <code>real-green2</code>

                                    </td>
                                </tr>
                                <tr>
                                    <td>黑色</td>
                                    <td><code>real-black</code>  <code>real-black2</code>

                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3"><strong>颜色后面加 2 时，表示选中后文字一起变色，具体见下方例示代码</strong>

                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">默认样式</div>
                            <div class="ereal-ample"> <span class="real-radio">
                            <label>
                            <input type="radio" name="radio1" /><em></em>
                            <span>默认样式</span>

                                </label>
                                </span> <span class="real-radio real-blue">
                                    <label>
                                        <input type="radio" name="radio1" /><em></em><span>蓝色</span>

                                </label>
                                </span> <span class="real-radio real-red">
                                    <label>
                                        <input type="radio" name="radio1" /><em></em><span>红色</span>

                                </label>
                                </span> <span class="real-radio real-yellow">
                                    <label>
                                        <input type="radio" name="radio1" /><em></em><span>黄色</span>

                                </label>
                                </span> <span class="real-radio real-green">
                                    <label>
                                        <input type="radio" name="radio1" /><em></em><span>绿色</span>

                                </label>
                                </span> <span class="real-radio real-black">
                                    <label>
                                        <input type="radio" name="radio1" /><em></em><span>黑色</span>

                                </label>
                                </span>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;span class="real-radio  real-blue"&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;label&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;span&gt;默认样式&lt;/span&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/label&gt;</span>

                                    </li>
                                    <li><span>&lt;/span&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <div class="table-real-row">
                            <div class="page_tit2">按钮样式</div>
                            <div class="ereal-ample">
                                <div class="real-RadioStyle">
                                    <input type="radio" name="Storage" id="model1" />
                                    <label for="model1">iPhone 6s</label>
                                </div>
                                <div class="real-RadioStyle">
                                    <input type="radio" name="Storage" id="model2" />
                                    <label for="model2">iPhone 6s Plus</label>
                                </div>
                                <div class="real-RadioStyle">
                                    <input type="radio" name="Storage" id="model3" />
                                    <label for="model3">iPhone 7</label>
                                </div>
                                <div class="real-RadioStyle">
                                    <input type="radio" name="Storage" id="model4" checked />
                                    <label for="model4">iPhone 7 Plus</label>
                                </div>
                            </div>
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;div class="<span>real-RadioStyle</span>"&gt;</span>
                                    </li>
                                    <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;label for="model1">iPhone 6s&gt;  &lt;/label&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">选中后文字也一起变色</div>
                            <div class="ereal-ample"> <span class="real-radio">
                                <label>
                                    <input type="radio" name="radio2" checked="checked" /><em></em><span>默认</span>

                                </label>
                                </span> <span class="real-radio real-blue2">
                                    <label><input type="radio" name="radio2"  /><em></em><span>蓝色</span>

                                </label>
                                </span> <span class="real-radio real-red2"><label><input type="radio" name="radio2"   /><em></em><span>红色</span>

                                </label>
                                </span> <span class="real-radio real-yellow2"><label><input type="radio" name="radio2"  /><em></em><span>黄色</span>

                                </label>
                                </span> <span class="real-radio real-green2"><label><input type="radio" name="radio2"   /><em></em><span>绿色</span>

                                </label>
                                </span> <span class="real-radio real-black2"><label><input type="radio" name="radio2"  /><em></em><span>黑色</span>

                                </label>
                                </span>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;span class="real-radio <span>real-blue2</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;label&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;span&gt;选中后文字也一起变色&lt;/span&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/label&gt;</span>

                                    </li>
                                    <li><span>&lt;/span&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">纵向单选框</div>
                            <div class="ereal-ample">
                                <div class="real-radio real-blue">
                                    <label>
                                        <input type="radio" name="radio3-1" /><em></em><span>菠萝</span>

                                    </label>
                                </div>
                                <div class="real-radio real-blue">
                                    <label>
                                        <input type="radio" name="radio3-1" /><em></em><span>芒果</span>

                                    </label>
                                </div>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;<span>div</span> class="real-radio"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;label&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/label&gt;</span>

                                    </li>
                                    <li><span>&lt;/<span>div</span>&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">横向单选框</div>
                            <div class="ereal-ample"> <span class="real-radio real-green"><label><input type="radio" name="radio4-1" /><em></em><span>菠萝</span>

                                </label>
                                </span> <span class="real-radio real-green"><label><input type="radio" name="radio4-1" /><em></em><span>芒果</span>

                                </label>
                                </span>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;<span>span</span> class="real-radio"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;label&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/label&gt;</span>

                                    </li>
                                    <li><span>&lt;/<span>span</span>&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                    </div>
                    <!--radio-->
                    <div id="checkbox" class="maindiv">
                        <div class="page_tit">复选框 &lt;input type="checkbox"&gt;</div>
                        <div class="table-real-row">
                            <table class="ptable">
                                <tr class="first">
                                    <td width="160" real-rowspan="6" align="center"><strong>颜色表</strong>

                                    </td>
                                    <td>class</td>
                                </tr>
                                <tr>
                                    <td>蓝色</td>
                                    <td><code>real-blue</code>  <code>real-blue2</code>

                                    </td>
                                </tr>
                                <tr>
                                    <td>红色</td>
                                    <td><code>real-red</code>  <code>real-red2</code>

                                    </td>
                                </tr>
                                <tr>
                                    <td>黄色</td>
                                    <td><code>real-yellow</code>  <code>real-yellow2</code>

                                    </td>
                                </tr>
                                <tr>
                                    <td>绿色</td>
                                    <td><code>real-green</code>  <code>real-green2</code>

                                    </td>
                                </tr>
                                <tr>
                                    <td>黑色</td>
                                    <td><code>real-black</code>  <code>real-black2</code>

                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3"><strong>颜色后面加 2 时，表示选中后文字一起变色，具体见下方例示代码</strong>

                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="table-real-row">
                            <div class="page_tit2">按钮样式</div>
                            <div class="ereal-ample">
                                <div class="real-RadioStyle">
                                    <input type="checkbox" id="love1" />
                                    <label for="love1">女</label>
                                    <input type="checkbox" id="love2" />
                                    <label for="love2">绘画</label>
                                    <input type="checkbox" id="love3" />
                                    <label for="love3">摄影</label>
                                    <input type="checkbox" id="love4" checked />
                                    <label for="love4">骑行</label>
                                </div>
                            </div>
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;div class="<span>real-RadioStyle</span>"&gt;</span>
                                    </li>
                                    <li class="level3"><span>&lt;input type="checkbox" name="love[]" id="love1" /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;label for="love1">iPhone 6s&gt;  &lt;/label&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">无文字描述</div>
                            <div class="ereal-ample"> <span class="real-checkbox"><label><input type="checkbox" checked="checked" /><em></em></label></span>
 <span class="real-checkbox real-blue"><label><input type="checkbox" checked="checked" /><em></em></label></span>
 <span class="real-checkbox real-red"><label><input type="checkbox" checked="checked" /><em></em></label></span>

                                <span
                                class="real-checkbox real-yellow">
                                    <label>
                                        <input type="checkbox" checked="checked" /><em></em>

                                    </label>
                                    </span> <span class="real-checkbox real-green"><label><input type="checkbox" checked="checked" /><em></em></label></span>
 <span class="real-checkbox real-black"><label><input type="checkbox" checked="checked" /><em></em></label></span>

                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;span class=&quot;real-checkbox&quot;&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;label&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/label&gt;</span>

                                    </li>
                                    <li><span>&lt;/span&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">有文字描述</div>
                            <div class="ereal-ample"> <span class="real-checkbox"><label><input type="checkbox" checked="checked" /><em></em><span>默认</span>

                                </label>
                                </span> <span class="real-checkbox real-blue"><label><input type="checkbox" checked="checked" /><em></em><span>蓝色</span>

                                </label>
                                </span> <span class="real-checkbox real-red"><label><input type="checkbox" checked="checked" /><em></em><span>红色</span>

                                </label>
                                </span> <span class="real-checkbox real-yellow"><label><input type="checkbox" checked="checked" /><em></em><span>黄石</span>

                                </label>
                                </span> <span class="real-checkbox real-green"><label><input type="checkbox" checked="checked" /><em></em><span>绿色</span>

                                </label>
                                </span> <span class="real-checkbox real-black"><label><input type="checkbox" checked="checked" /><em></em><span>黑色</span>

                                </label>
                                </span>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;span class=&quot;real-checkbox&quot;&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;label&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level3"><span><span>&lt;span&gt;有文字描述&lt;/span&gt;</span></span>
                                    </li>
                                    <li class="level2"><span>&lt;/label&gt;</span>

                                    </li>
                                    <li><span>&lt;/span&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">选中后文字也一起变色</div>
                            <div class="ereal-ample"> <span class="real-checkbox"><label><input type="checkbox" checked="checked" /><em></em><span>默认</span>

                                </label>
                                </span> <span class="real-checkbox real-blue2"><label><input type="checkbox" checked="checked" /><em></em><span>蓝色</span>

                                </label>
                                </span> <span class="real-checkbox real-red2"><label><input type="checkbox" checked="checked" /><em></em><span>红色</span>

                                </label>
                                </span> <span class="real-checkbox real-yellow2"><label><input type="checkbox" checked="checked" /><em></em><span>黄石</span>

                                </label>
                                </span> <span class="real-checkbox real-green2"><label><input type="checkbox" checked="checked" /><em></em><span>绿色</span>

                                </label>
                                </span> <span class="real-checkbox real-black2"><label><input type="checkbox" checked="checked" /><em></em><span>黑色</span>

                                </label>
                                </span>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;span class=&quot;real-checkbox <span>real-blue2</span>&quot;&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;label&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;span&gt;选中后文字也一起变色&lt;/span&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/label&gt;</span>

                                    </li>
                                    <li><span>&lt;/span&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">纵向显示</div>
                            <div class="ereal-ample">
                                <div class="real-checkbox real-blue">
                                    <label>
                                        <input type="checkbox" checked="checked" /><em></em><span>菠萝</span>

                                    </label>
                                </div>
                                <div class="real-checkbox real-blue">
                                    <label>
                                        <input type="checkbox" /><em></em><span>芒果</span>

                                    </label>
                                </div>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;<span>div</span> class=&quot;real-checkbox&quot;&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;label&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/label&gt;</span>

                                    </li>
                                    <li><span>&lt;/<span>div</span>&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">横向显示</div>
                            <div class="ereal-ample"> <span class="real-checkbox real-green"><label><input type="checkbox" checked="checked" /><em></em><span>菠萝</span>

                                </label>
                                </span> <span class="real-checkbox real-green"><label><input type="checkbox" /><em></em><span>芒果</span>

                                </label>
                                </span>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;<span>span</span> class=&quot;real-checkbox&quot;&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;label&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/label&gt;</span>

                                    </li>
                                    <li><span>&lt;/<span>span</span>&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                    </div>
                    <!--checkbox-->
                    <div id="switch" class="maindiv">
                        <div class="page_tit">开关 &lt;input type="checkbox"&gt;</div>
                        <div class="page_tit3">本质上是单个的复选框</div>
                        <div class="table-real-row">
                            <div class="page_tit2">默认样式</div>
                            <div class="ereal-ample">
                                <input class="real-switch" type="checkbox" />
                                <input class="real-switch" type="checkbox" checked="checked" />
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;input class=&quot;real-switch&quot; type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">带ON/OFF文字</div>
                            <div class="ereal-ample">
                                <input class="real-switch real-onoff" type="checkbox" />
                                <input class="real-switch real-onoff" type="checkbox" checked="checked" />
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;input class=&quot;real-switch <span>real-onoff</span>&quot; type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;</span>
                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">自定义文字描述</div>
                            <div class="page_tit3">class="<code>real-switch-tip</code>"，为 <code>&lt;input&gt;</code>  <span>自定义文字描述</span>

                            </div>
                            <div class="ereal-ample"> <span class="real-switch-tip"><label><input type="checkbox" /><em></em><span>是否发射核弹</span><span>发射！！</span>

                                </label>
                                </span> <span class="real-switch-tip"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span>

                                </label>
                                </span>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;div class=&quot;real-switch-tip&quot;&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;label&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;span&gt;是否发射核弹&lt;/span&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;span&gt;发射！！&lt;/span&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/label&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">其他颜色</div>
                            <div class="page_tit3">class="<code>real-switch</code>"，为 <code>&lt;input&gt;</code> 额外添加一个<span>颜色CSS</span>即可</div>
                            <div class="page_tit3">class="<code>real-switch-tip</code>"，为 <code>&lt;input&gt;</code> 父标签额外添加一个<span>颜色CSS</span>即可</div>
                            <div class="ereal-ample">
                                <div class="page_tit4">
                                    <input class="real-switch real-blue" type="checkbox" checked="checked" />
                                    <input class="real-switch real-red" type="checkbox" checked="checked" />
                                    <input class="real-switch real-yellow" type="checkbox" checked="checked" />
                                    <input class="real-switch real-green" type="checkbox" checked="checked" />
                                    <input class="real-switch real-black" type="checkbox" checked="checked" />
                                </div>
                                <div class="page_tit4">
                                    <input class="real-switch real-onoff real-blue" type="checkbox" checked="checked" />
                                    <input class="real-switch real-onoff real-red" type="checkbox" checked="checked" />
                                    <input class="real-switch real-onoff real-yellow" type="checkbox" checked="checked" />
                                    <input class="real-switch real-onoff real-green" type="checkbox" checked="checked" />
                                    <input class="real-switch real-onoff real-black" type="checkbox" checked="checked" />
                                </div>
                                <div class="page_tit4"> <span class="real-switch-tip real-blue"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span>

                                    </label>
                                    </span> <span class="real-switch-tip real-red"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span>

                                    </label>
                                    </span> <span class="real-switch-tip real-yellow"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span>

                                    </label>
                                    </span> <span class="real-switch-tip real-green"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span>

                                    </label>
                                    </span> <span class="real-switch-tip real-black"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span>

                                    </label>
                                    </span>
                                </div>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;input class=&quot;real-switch <span>real-blue</span>&quot; type=&quot;checkbox&quot; /&gt;</span>
                                    </li>
                                    <li></li>
                                    <li>/****或****/</li>
                                    <li></li>
                                    <li><span>&lt;div class=&quot;real-switch-tip <span>real-blue</span>&quot;&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;label&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;span&gt;是否发射核弹&lt;/span&gt;</span>

                                    </li>
                                    <li class="level3"><span>&lt;span&gt;发射！！&lt;/span&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;/label&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                    </div>
                    <!--switch-->
                    <div id="file" class="maindiv">
                        <div class="page_tit">上传控件 &lt;input type="file"&gt;</div>
                        <div class="page_tit3">class="<code>real-file</code>"，为 <code>&lt;input&gt;</code> 父标签内的上传控件增加默认样式</div>
                        <div class="table-real-row">
                            <div class="page_tit2">默认样式</div>
                            <div class="ereal-ample">
                                <div class="real-file">
                                    <input type="file" /><span><i></i>默认样式</span>

                                </div>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;div class="real-file"&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="page_tit3">class="<code>real-file real-lit</code>"，为 <code>&lt;input&gt;</code> 父标签内的上传控件增加小尺寸样式</div>
                        <div class="table-real-row">
                            <div class="page_tit2">小尺寸</div>
                            <div class="ereal-ample"> <span class="real-file real-lit"><input type="file" /><span><i></i>小尺寸</span></span> <span class="real-file real-lit real-blue"><input type="file" /><span><i></i>小尺寸</span></span>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;span class="real-file <span>real-lit</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span>

                                    </li>
                                    <li><span>&lt;/span&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">其他颜色</div>
                            <div class="ereal-ample"> <span class="real-file real-blue"><input type="file" /><span><i></i>蓝色样式</span></span> <span class="real-file real-red"><input type="file" /><span><i></i>红色样式</span></span> <span class="real-file real-yellow"><input type="file" /><span><i></i>黄色样式</span></span>
                                <span
                                class="real-file real-green">
                                    <input type="file" /><span><i></i>绿色样式</span></span> <span class="real-file real-black"><input type="file" /><span><i></i>黑色样式</span></span>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;span class="real-file <span>real-blue</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span>

                                    </li>
                                    <li><span>&lt;/span&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">无图标样式</div>
                            <div class="ereal-ample">
                                <div class="real-file">
                                    <input type="file" /><span>无图标样式</span>

                                </div>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;div class="real-file"&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;span&gt;无图片样式&lt;/span&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">自定义图片样式&lt;img&gt;</div>
                            <div class="page_tit3">图片无尺寸要求</div>
                            <div class="ereal-ample">
                                <div class="real-file">
                                    <input type="file" /><span><img src="css/img.png" />自定义图片样式</span>

                                </div>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;div class="real-file"&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;span&gt;<span>&lt;img src=&quot;css/img.png&quot; /&gt;</span>自定义图片样式&lt;/span&gt;</span>
                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">自定义font样式&lt;i class=&quot;icon-<span>【自定义font class名】</span>&quot;&gt;</div>
                            <div class="page_tit3">当<span>&lt;i&gt;</span>标签class包含<code>icon-</code>  <code>ico-</code>  <code>ion-</code>  <code>glyphicon-</code>  <code>fa-</code>  <code>ti-</code>  <code>zmdi-</code>  <code>wi-</code>（常用图标库）时，默认图标会被替换成新的font图标</div>
                            <div class="ereal-ample">
                                <div class="real-file">
                                    <input type="file" /><span><i class="icon-real-iaolian"></i>自定义font样式</span>

                                </div>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;div class="real-file"&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;span&gt;<span>&lt;i class="icon-"&gt;&lt;/i&gt;</span>自定义font样式&lt;/span&gt;</span>
                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">选中文件反馈</div>
                            <div class="page_tit3">由于css不支持检测是否有选中文件，所以选中反馈需要添加额外的 <code>javascript</code> 代码，这是本项目唯一有用到 <code>javascript</code> 的地方</div>
                            <div class="page_tit3">当然这不是必要的，你可以选择不加，只是用户体验不好，用户不知道有没有选中文件</div>
                            <div class="page_tit3">本例使用了原生的 <code>javascript</code> 代码，无需加载 <code>jQuery</code>

                            </div>
                            <div class="ereal-ample"> <span class="real-file"><input type="file" onchange="real-fileok(this)" multiple data-oldname="sad" /><span><i></i>未选中文件</span></span> <span class="real-file"><input type="file" onchange="real-fileok(this)" multiple /><span>无图标样式</span></span> <span class="real-file"><input type="file" onchange="real-fileok(this)" multiple /><span><img src="css/img.png" />无图标样式</span></span>
                                <span
                                class="real-file">
                                    <input type="file" onchange="real-fileok(this)" multiple /><span><i class="icon-real-iaolian"></i>自定义font样式</span></span>
                                    <script>
                                    function xfileok(o) {
                                        //获取文件名
                                        let files = o.files;
                                        let fval;
                                        if (files.length > 1) {
                                            fval = files.length + "个文件";
                                        } else if (files.length == 1) {
                                            fval = files[0].name;
                                        }

                                        //修改文本
                                        let prefix = '已选择: ';
                                        let reg =
                                            /(\<i(\s{1,}class\=[\"\'][A-z0-9-\-]*[\"\'])?\>\<\/i\>|\<img\s{1,}src\=[\"\'][A-z0-9-\/\.\-]*[\"\']\s{0,}\/{0,}\>)?(\S*)/;
                                        let span = o.parentNode.getElementsByTagName("span")[0];
                                        spanhtml = span.innerHTML;
                                        match = spanhtml.match(reg);
                                        oldname = span.dataset.oldname;

                                        html = '';
                                        if (match[1]) {
                                            html += match[1];
                                        }
                                        if (fval) {
                                            html += prefix + fval;
                                            span.innerHTML = html;
                                            if (!oldname) {
                                                span.dataset.oldname = match[3];
                                            }
                                        } else {
                                            html += oldname;
                                            span.innerHTML = html;
                                        }
                                    }
                                    </script>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;div class="real-file"&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;input type=&quot;file&quot; <span>onchange=&quot;real-fileok(this)&quot;</span> /&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;未选中文件&lt;/span&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                    <li><span></span>

                                    </li>
                                    <li><span>&lt;script&gt;</span>

                                    </li>
                                    <li><span>function real-fileok(o)</span>

                                    </li>
                                    <li><span>{</span>

                                    </li>
                                    <li class="level2"><span>//获取文件名</span>

                                    </li>
                                    <li class="level2"><span>let files = o.files;</span>

                                    </li>
                                    <li class="level2"><span>let fval;</span>

                                    </li>
                                    <li class="level2"><span>if(files.length>1){</span>

                                    </li>
                                    <li class="level3"><span>fval = files.length+&quot;个文件&quot;;</span>

                                    </li>
                                    <li class="level2"><span>}else if(files.length==1){</span>

                                    </li>
                                    <li class="level3"><span>fval = files[0].name;</span>

                                    </li>
                                    <li class="level2"><span>}</span>

                                    </li>
                                    <li><span></span>

                                    </li>
                                    <li class="level2"><span>//修改文本</span>

                                    </li>
                                    <li class="level2"><span>let prefireal- = &#39;已选择: &#39;;</span>

                                    </li>
                                    <li class="level2"><span>let reg = /(\&lt;i(\s{1,}class\=[\&quot;\&#39;][A-z0-9-\-]*[\&quot;\&#39;])?\&gt;\&lt;\/i\&gt;|\&lt;img\s{1,}src\=[\&quot;\&#39;][A-z0-9-\/\.\-]*[\&quot;\&#39;]\s{0,}\/{0,}\&gt;)?(\S*)/;</span>

                                    </li>
                                    <li class="level2"><span>let span = o.parentNode.getElementsByTagName(&quot;span&quot;)[0];</span>

                                    </li>
                                    <li class="level2"><span>spanhtml = span.innerHTML;</span>

                                    </li>
                                    <li class="level2"><span>match = spanhtml.match(reg);</span>

                                    </li>
                                    <li class="level2"><span>oldname = span.dataset.oldname;</span>

                                    </li>
                                    <li><span></span>

                                    </li>
                                    <li class="level2"><span>html = &#39;&#39;;</span>

                                    </li>
                                    <li class="level2"><span>if(match[1]){</span>

                                    </li>
                                    <li class="level3"><span>html += match[1];</span>

                                    </li>
                                    <li class="level2"><span>}</span>

                                    </li>
                                    <li class="level2"><span>if(fval){</span>

                                    </li>
                                    <li class="level3"><span>html += prefireal- + fval;</span>

                                    </li>
                                    <li class="level3"><span>span.innerHTML = html;</span>

                                    </li>
                                    <li class="level3"><span>if(!oldname){</span>

                                    </li>
                                    <li class="level4"><span>span.dataset.oldname = match[3];</span>

                                    </li>
                                    <li class="level3"><span>}</span>

                                    </li>
                                    <li class="level2"><span>}else{</span>

                                    </li>
                                    <li class="level3"><span>html += oldname;</span>

                                    </li>
                                    <li class="level3"><span>span.innerHTML = html;</span>

                                    </li>
                                    <li class="level2"><span>}</span>

                                    </li>
                                    <li><span>}</span>

                                    </li>
                                    <li><span>&lt;/script&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                            <!--pre-->
                        </div>
                        <!--table-real-row-->
                    </div>
                    <!--file-->
                    <div id="table" class="maindiv">
                        <div class="page_tit">表格 &lt;table&gt;</div>
                        <div class="table-real-row">
                            <table class="ptable">
                                <tr class="first">
                                    <td width="140">标签</td>
                                    <td>class=""</td>
                                    <td>描述</td>
                                </tr>
                                <tr>
                                    <td>&lt;table&gt;</td>
                                    <td>&lt;table class="<code>real-table</code>"&gt;…&lt;/table&gt;</td>
                                    <td>表格本身</td>
                                </tr>
                                <tr>
                                    <td>&lt;table&gt;的父标签</td>
                                    <td>&lt;div class="<code>real-tablein</code>"&gt;&lt;table&gt;…&lt;/table&gt;&lt;/div&gt;</td>
                                    <td>元素内的表格</td>
                                </tr>
                            </table>
                        </div>
                        <!--table-real-row-->
                        <div id="table-1" class="table-real-row">
                            <div class="page_tit2">默认样式：<span>少量的内边距（padding:8px）和边框</span>

                            </div>
                            <div class="page_tit3">class="<code>real-table</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>默认样式</span>

                            </div>
                            <div class="page_tit3">class="<code>real-tablein</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>默认样式</span>

                            </div>
                            <div class="ereal-ample">
                                <table class="real-table">
                                    <tr>
                                        <td real-rowspan="1" colspan="2">A</td>
                                        <td>B</td>
                                        <td>C</td>
                                    </tr>
                                    <tr>
                                        <td real-rowspan="2" colspan="1">1</td>
                                        <td>a</td>
                                        <td>b</td>
                                        <td>c</td>
                                    </tr>
                                    <tr>
                                        <td>d</td>
                                        <td>e</td>
                                        <td real-rowspan="2" colspan="1">f</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>g</td>
                                        <td>h</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>i</td>
                                        <td real-rowspan="1" colspan="2">j</td>
                                    </tr>
                                </table>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;table class="real-table"&gt;</span>

                                    </li>
                                    <li class="level2"><span>…</span>

                                    </li>
                                    <li><span>&lt;/table&gt;</span>

                                    </li>
                                    <li></li>
                                    <li>/****或****/</li>
                                    <li></li>
                                    <li><span>&lt;div class="real-tablein"&gt;</span>

                                    </li>
                                    <li class="level2"><span>&lt;table&gt;</span>

                                    </li>
                                    <li class="level3"><span>…</span>

                                    </li>
                                    <li class="level2"><span>&lt;/table&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                            </div>
                            <!--precopy-->
                        </div>
                        <!--table-real-row-->
                        <div id="table-2" class="table-real-row">
                            <div class="page_tit2">无外部边框样式</div>
                            <div class="page_tit3">class="<code>real-table</code>  <code>real-nobor-out</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>无外部边框样式</span>

                            </div>
                            <div class="page_tit3">class="<code>real-tablein</code>  <code>real-nobor-out</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>无外部边框样式</span>

                            </div>
                            <div class="ereal-ample">
                                <table class="real-table real-nobor-out">
                                    <tr>
                                        <td real-rowspan="1" colspan="2">A</td>
                                        <td>B</td>
                                        <td>C</td>
                                    </tr>
                                    <tr>
                                        <td real-rowspan="2" colspan="1">1</td>
                                        <td>a</td>
                                        <td>b</td>
                                        <td>c</td>
                                    </tr>
                                    <tr>
                                        <td>d</td>
                                        <td>e</td>
                                        <td real-rowspan="2" colspan="1">f</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>g</td>
                                        <td>h</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>i</td>
                                        <td real-rowspan="1" colspan="2">j</td>
                                    </tr>
                                </table>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;table class="real-table <span>real-nobor-out</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>…</span>

                                    </li>
                                    <li><span>&lt;/table&gt;</span>

                                    </li>
                                    <li></li>
                                    <li>/****或****/</li>
                                    <li></li>
                                    <li><span>&lt;div class="real-tablein <span>real-nobor-out</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;table&gt;</span>

                                    </li>
                                    <li class="level3"><span>…</span>

                                    </li>
                                    <li class="level2"><span>&lt;/table&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                        </div>
                        <!--table-real-row-->
                        <div id="table-3" class="table-real-row">
                            <div class="page_tit2">无内部边框样式</div>
                            <div class="page_tit3">class="<code>real-table</code>  <code>real-nobor-in</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>无内部边框样式</span>

                            </div>
                            <div class="page_tit3">class="<code>real-tablein</code>  <code>real-nobor-in</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>无内部边框样式</span>

                            </div>
                            <div class="ereal-ample">
                                <table class="real-table real-nobor-in">
                                    <tr>
                                        <td>1</td>
                                        <td>2</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>5</td>
                                        <td>6</td>
                                    </tr>
                                </table>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;table class="real-table <span>real-nobor-in</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>…</span>

                                    </li>
                                    <li><span>&lt;/table&gt;</span>

                                    </li>
                                    <li></li>
                                    <li>/****或****/</li>
                                    <li></li>
                                    <li><span>&lt;div class="real-tablein <span>real-nobor-in</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;table&gt;</span>

                                    </li>
                                    <li class="level3"><span>…</span>

                                    </li>
                                    <li class="level2"><span>&lt;/table&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                        </div>
                        <!--table-real-row-->
                        <div id="table-4" class="table-real-row">
                            <div class="page_tit2">无全部边框样式</div>
                            <div class="page_tit3">class="<code>real-table</code>  <code>real-nobor-all</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>无全部边框样式</span>

                            </div>
                            <div class="page_tit3">class="<code>real-tablein</code>  <code>real-nobor-all</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>无全部边框样式</span>

                            </div>
                            <div class="ereal-ample">
                                <table class="real-table real-nobor-all">
                                    <tr>
                                        <td>1</td>
                                        <td>2</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>5</td>
                                        <td>6</td>
                                    </tr>
                                </table>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;table class="real-table <span>real-nobor-all</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>…</span>

                                    </li>
                                    <li><span>&lt;/table&gt;</span>

                                    </li>
                                    <li></li>
                                    <li>/****或****/</li>
                                    <li></li>
                                    <li><span>&lt;div class="real-tablein <span>real-nobor-all</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;table&gt;</span>

                                    </li>
                                    <li class="level3"><span>…</span>

                                    </li>
                                    <li class="level2"><span>&lt;/table&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                        </div>
                        <!--table-real-row-->
                        <div id="table-5" class="table-real-row">
                            <div class="page_tit2">水平边框样式</div>
                            <div class="page_tit3">class="<code>real-table</code>  <code>real-bor-tr</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>水平边框样式</span>

                            </div>
                            <div class="page_tit3">class="<code>real-tablein</code>  <code>real-bor-tr</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>水平边框样式</span>

                            </div>
                            <div class="ereal-ample">
                                <table class="real-table real-bor-tr">
                                    <tr>
                                        <td real-rowspan="1" colspan="2">A</td>
                                        <td>B</td>
                                        <td>C</td>
                                    </tr>
                                    <tr>
                                        <td real-rowspan="2" colspan="1">1</td>
                                        <td>a</td>
                                        <td>b</td>
                                        <td>c</td>
                                    </tr>
                                    <tr>
                                        <td>d</td>
                                        <td>e</td>
                                        <td real-rowspan="2" colspan="1">f</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>g</td>
                                        <td>h</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>i</td>
                                        <td real-rowspan="1" colspan="2">j</td>
                                    </tr>
                                </table>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;table class="real-table <span>real-bor-tr</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>…</span>

                                    </li>
                                    <li><span>&lt;/table&gt;</span>

                                    </li>
                                    <li></li>
                                    <li>/****或****/</li>
                                    <li></li>
                                    <li><span>&lt;div class="real-tablein <span>real-bor-tr</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;table&gt;</span>

                                    </li>
                                    <li class="level3"><span>…</span>

                                    </li>
                                    <li class="level2"><span>&lt;/table&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                        </div>
                        <!--table-real-row-->
                        <div id="table-6" class="table-real-row">
                            <div class="page_tit2">水平边框无外边框样式</div>
                            <div class="page_tit3">class="<code>real-table</code>  <code>real-bor-tr-noout</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>水平边框无外边框样式</span>

                            </div>
                            <div class="page_tit3">class="<code>real-tablein</code>  <code>real-bor-tr-noout</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>水平边框无外边框样式</span>

                            </div>
                            <div class="ereal-ample">
                                <table class="real-table real-bor-tr-noout">
                                    <tr>
                                        <td real-rowspan="1" colspan="2">A</td>
                                        <td>B</td>
                                        <td>C</td>
                                    </tr>
                                    <tr>
                                        <td real-rowspan="2" colspan="1">1</td>
                                        <td>a</td>
                                        <td>b</td>
                                        <td>c</td>
                                    </tr>
                                    <tr>
                                        <td>d</td>
                                        <td>e</td>
                                        <td real-rowspan="2" colspan="1">f</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>g</td>
                                        <td>h</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>i</td>
                                        <td real-rowspan="1" colspan="2">j</td>
                                    </tr>
                                </table>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;table class="real-table <span>real-bor-tr-noout</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>…</span>

                                    </li>
                                    <li><span>&lt;/table&gt;</span>

                                    </li>
                                    <li></li>
                                    <li>/****或****/</li>
                                    <li></li>
                                    <li><span>&lt;div class="real-tablein <span>real-bor-tr-noout</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;table&gt;</span>

                                    </li>
                                    <li class="level3"><span>…</span>

                                    </li>
                                    <li class="level2"><span>&lt;/table&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                        </div>
                        <!--table-real-row-->
                        <div id="table-7" class="table-real-row">
                            <div class="page_tit2">圆角样式</div>
                            <div class="page_tit3">class="<code>real-table</code>  <code>real-round</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>圆角样式</span>

                            </div>
                            <div class="page_tit3">class="<code>real-tablein</code>  <code>real-round</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>圆角样式</span>

                            </div>
                            <div class="ereal-ample">
                                <table class="real-table real-round">
                                    <tr>
                                        <th>1</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Username</th>
                                    </tr>
                                    <tr>
                                        <td real-rowspan="2">1</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@TwBootstrap</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td colspan="2">Larry the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                </table>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;table class="real-table <span>real-round</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>…</span>

                                    </li>
                                    <li><span>&lt;/table&gt;</span>

                                    </li>
                                    <li></li>
                                    <li>/****或****/</li>
                                    <li></li>
                                    <li><span>&lt;div class="real-tablein <span>real-round</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;table&gt;</span>

                                    </li>
                                    <li class="level3"><span>…</span>

                                    </li>
                                    <li class="level2"><span>&lt;/table&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                        </div>
                        <!--table-real-row-->
                        <div id="table-8" class="table-real-row">
                            <div class="page_tit2">行间隔背景色 <span>奇数(real-odd) 或 偶数(real-even)</span>

                            </div>
                            <div class="page_tit3">class="<code>real-table</code>  <code>real-odd</code> / <code>real-even</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>行间隔背景色</span>

                            </div>
                            <div class="page_tit3">class="<code>real-tablein</code>  <code>real-odd</code> / <code>real-even</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>行间隔背景色</span>

                            </div>
                            <div class="ereal-ample">
                                <table class="real-table real-odd">
                                    <tr>
                                        <th>#</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Username</th>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@TwBootstrap</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                </table>
                                <br />
                                <table class="real-table real-even">
                                    <tr>
                                        <th>#</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Username</th>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@TwBootstrap</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                </table>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;table class="real-table <span>real-odd</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>…</span>

                                    </li>
                                    <li><span>&lt;/table&gt;</span>

                                    </li>
                                    <li></li>
                                    <li>/****或****/</li>
                                    <li></li>
                                    <li><span>&lt;div class="real-tablein <span>real-odd</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;table&gt;</span>

                                    </li>
                                    <li class="level3"><span>…</span>

                                    </li>
                                    <li class="level2"><span>&lt;/table&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                    <li></li>
                                    <li>/****************或****************/</li>
                                    <li></li>
                                    <li><span>&lt;table class="real-table <span>real-even</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>…</span>

                                    </li>
                                    <li><span>&lt;/table&gt;</span>

                                    </li>
                                    <li></li>
                                    <li>/****或****/</li>
                                    <li></li>
                                    <li><span>&lt;div class="real-tablein <span>real-even</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;table&gt;</span>

                                    </li>
                                    <li class="level3"><span>…</span>

                                    </li>
                                    <li class="level2"><span>&lt;/table&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                        </div>
                        <!--table-real-row-->
                        <div id="table-9" class="table-real-row">
                            <div class="page_tit2">鼠标悬停样式</div>
                            <div class="page_tit3">class="<code>real-table</code>  <code>real-hover</code>"，为 <code>&lt;table&gt;</code> 标签增加<span>鼠标悬停样式</span>

                            </div>
                            <div class="page_tit3">class="<code>real-table</code>  <code>real-hover</code>"，为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>鼠标悬停样式</span>

                            </div>
                            <div class="ereal-ample">
                                <table class="real-table real-hover">
                                    <tr>
                                        <th>#</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Username</th>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@TwBootstrap</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                </table>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <ol>
                                    <li><span>&lt;table class="real-table <span>real-hover</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>…</span>

                                    </li>
                                    <li><span>&lt;/table&gt;</span>

                                    </li>
                                    <li></li>
                                    <li>/****或****/</li>
                                    <li></li>
                                    <li><span>&lt;div class="real-tablein <span>real-hover</span>"&gt;</span>
                                    </li>
                                    <li class="level2"><span>&lt;table&gt;</span>

                                    </li>
                                    <li class="level3"><span>…</span>

                                    </li>
                                    <li class="level2"><span>&lt;/table&gt;</span>

                                    </li>
                                    <li><span>&lt;/div&gt;</span>

                                    </li>
                                </ol>
                                <div class="precode"></div>
                                <!--precopy-->
                            </div>
                        </div>
                        <!--table-real-row-->
                    </div>
                    <!--file-->
                    <div id="timeLine" class="maindiv">
                        <div class="page_tit">时间轴 &lt;timeLine&gt;</div>
                        <div class="table-real-row"></div>
                        <!--table-real-row-->
                        <div id="timeLine" class="table-real-row">
                            <div class="page_tit2">样式：</div>
                            <div class="ereal-ample">
                                <ul class="real-timeLine1" style="width: 1200px;">
                                    <li>
                                        <p>15:53<span>2019年7月22日</span>

                                        </p>
                                        <div class="con">css时间轴 - 样式</div>
                                    </li>
                                    <li>
                                        <p>这是标题<span>2019年7月22日 15:53</span>

                                        </p>
                                        <div class="con">css时间轴 - 样式</div>
                                    </li>
                                    <li class="on">
                                        <p>15:53<span>2019年7月22日</span>

                                        </p>
                                        <div class="con">css时间轴 - 样式内容能容纳</div>
                                    </li>
                                    <li>
                                        <p>15:53<span>2019年7月22日</span>

                                        </p>
                                        <div class="con">特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；特别长的文字显示效果；</div>
                                    </li>
                                    <li>
                                        <p>这是标题<span>2019年7月22日 15:53</span>

                                        </p>
                                        <div class="con">css时间轴 - 样式</div>
                                    </li>
                                    <li>
                                        <p>这是标题<span>2019年7月22日 15:53</span>

                                        </p>
                                        <div class="con">
                                            <img src="./img/t1.png">
                                            <img src="./img/t2.png">
                                        </div>
                                    </li>
                                    <li>
                                        <p>15:53<span>2019年7月22日</span>

                                        </p>
                                        <div class="con">流程结束</div>
                                    </li>
                                </ul>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <div class="precode"></div>
                            </div>
                            <!--precopy-->
                        </div>
                    </div>
                    <div id="progress" class="maindiv">
                        <div class="page_tit">进度条 &lt;timeLine&gt;</div>
                        <div class="table-real-row"></div>
                        <!--table-real-row-->
                        <div id="progress" class="table-real-row">
                            <div class="page_tit2">样式：</div>
                            <div class="ereal-ample">
                                <div class="progress"> <span class="red" style="width: 20%;"><span>20%</span></span>
                                </div>
                                <div class="progress"> <span class="blue" style="width: 40%;"><span>40%</span></span>
                                </div>
                                <div class="progress"> <span class="orange" style="width: 60%;"><span>60%</span></span>
                                </div>
                                <div class="progress"> <span style="width: 80%;"><span>80%</span></span>
                                </div>
                                <div class="progress"> <span class="green" style="width: 100%;"><span>100%</span></span>
                                </div>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <div class="precode"></div>
                            </div>
                            <!--precopy-->
                        </div>
                    </div>
                    <div id="amplification" class="maindiv">
                        <div class="page_tit">图片放大 &lt;amplification&gt;</div>
                        <div class="table-real-row"></div>
                        <!--table-real-row-->
                        <div class="table-real-row">
                            <div class="page_tit2">样式：</div>
                            <div class="ereal-ample">
                                <p style="	margin:100px;
	height:200px;
	width:200px;">
                                    <img class="amplification" src="./img/t1.png ">
                                </p>
                            </div>
                            <!--ereal-ample-->
                            <div class="pre">
                                <div class="precode"></div>
                            </div>
                            <!--precopy-->
                        </div>
                    </div>
                    <div id="container" class="maindiv">
                        <div class="page_tit">图片反转 &lt;flip-container&gt;</div>
                        <div class="table-real-row"></div>
                        <div class="flip-container">
                            <div class="flipper">
                                <div class="front" style="background-color: red">
                                    <p>正面</p>
                                </div>
                                <div class="back" style="background-color: gray">
                                    <p>背面</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="coupons" class="maindiv">
                        <div class="page_tit">优惠卷 &lt;coupons&gt;</div>
                        <div class="table-real-row"></div>
                        <div class="coupon-wrapper">
                             <h3>京东优惠领取：</h3>

                            <div class="coupon-item">
                                <div class="style-one">
                                    <div class="info-box">
                                        <p class="nick">京东平台优惠?</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>立即领取</span>

                                    </a>
                                </div>
                            </div>
                            <div class="coupon-item">
                                <div class="style-one have">
                                    <div class="info-box">
                                        <p class="nick">京东平台优惠?</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>已领取</span>

                                    </a>
                                </div>
                            </div>
                             <h3>唯品会优惠?领取：</h3>

                            <div class="coupon-item">
                                <div class="style-two">
                                    <div class="info-box">
                                        <p class="nick">唯品会平台优惠?</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>立即领取</span>

                                    </a>
                                </div>
                            </div>
                            <div class="coupon-item">
                                <div class="style-two have">
                                    <div class="info-box">
                                        <p class="nick">唯品会平台优惠?</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>已领取</span>

                                    </a>
                                </div>
                            </div>
                             <h3>1号店优惠?领取：</h3>

                            <div class="coupon-item">
                                <div class="style-three">
                                    <div class="info-box">
                                        <p class="nick">1号店平台优惠券</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>点击领取</span>

                                    </a>
                                </div>
                            </div>
                            <div class="coupon-item">
                                <div class="style-three have">
                                    <div class="info-box">
                                        <p class="nick">1号店平台优惠券</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>已领取</span>

                                    </a>
                                </div>
                            </div>
                             <h3>当当网优惠券领取：</h3>

                            <div class="coupon-item">
                                <div class="style-four">
                                    <div class="info-box">
                                        <p class="nick">当当网平台优惠券</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span class="coBlack">立即领取</span>

                                    </a>
                                </div>
                            </div>
                            <div class="coupon-item">
                                <div class="style-four have">
                                    <div class="info-box">
                                        <p class="nick">当当网平台优惠券</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>已领取</span>

                                    </a>
                                </div>
                            </div>
                             <h3>飞牛网优惠?领取：</h3>

                            <div class="coupon-item">
                                <div class="style-five">
                                    <div class="info-box">
                                        <p class="nick">飞牛网平台优惠券</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>立即领取</span>

                                    </a>
                                </div>
                            </div>
                            <div class="coupon-item">
                                <div class="style-five have">
                                    <div class="info-box">
                                        <p class="nick">飞牛网平台优惠券</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>已领取</span>

                                    </a>
                                </div>
                            </div>
                             <h3>我买网优惠?领取：</h3>

                            <div class="coupon-item">
                                <div class="style-six">
                                    <div class="info-box">
                                        <p class="nick">我买网平台优惠券</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>点击领取</span>

                                    </a>
                                </div>
                            </div>
                            <div class="coupon-item">
                                <div class="style-six have">
                                    <div class="info-box">
                                        <p class="nick">我买网平台优惠券</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>已领取</span>

                                    </a>
                                </div>
                            </div>
                             <h3>苏宁优惠?领取：</h3>

                            <div class="coupon-item">
                                <div class="style-seven">
                                    <div class="info-box">
                                        <p class="nick">苏宁平台优惠券</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>立即领取</span>

                                    </a>
                                </div>
                            </div>
                            <div class="coupon-item">
                                <div class="style-seven have">
                                    <div class="info-box">
                                        <p class="nick">苏宁平台优惠券</p>
                                        <div class="coupon-money">
                                            <div class="lay of">￥<em>10</em>

                                            </div>
                                            <div class="lay">
                                                <p class="tit">优惠?</p>
                                                <p class="demand">满100元可用</p>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:;" class="get-btn"> <span>已领取</span>

                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="Tag" class="maindiv">
                        <div class="page_tit">标签 &lt;Tag&gt;</div>
                        <div class="table-real-row"></div>
                        <div class="coupon-wrapper">
                            <div> <span class="real_tag ">标签一</span>  <span class="real_tag real_tag-success ">标签二</span>  <span class="real_tag real_tag-info ">标签三</span>  <span class="real_tag real_tag-warning ">标签四</span>  <span class="real_tag real_tag-danger ">标签五</span>

                            </div>
                            <div> <span class="real_tag ">标签一<i class="real_icon  real_icon_close"></i></span>  <span class="real_tag real_tag-success ">标签二<i class="real_icon  real_icon_close"></i></span>  <span class="real_tag real_tag-info ">标签三<i class="real_icon  real_icon_close"></i></span> 
                                <span
                                class="real_tag real_tag-warning ">标签四<i class="real_icon  real_icon_close"></i>

                                    </span> <span class="real_tag real_tag-danger ">标签五<i class="real_icon  real_icon_close"></i></span>

                            </div>
                            <div>
                                <div class="real-tag-group"><span class="real-tag-group_title">Dark</span>  <span class="real_tag real_tag-dark">
    标签一
  </span><span class="real_tag real_tag-success real_tag-dark">
    标签二
  </span><span class="real_tag real_tag-info real_tag-dark">
    标签三
  </span><span class="real_tag real_tag-danger real_tag-dark">
    标签四
  </span><span class="real_tag real_tag-warning real_tag-dark">
    标签五
  </span>

                                </div>
                                <div class="real-tag-group"><span class="real-tag-group_title">Plain</span>  <span class="real_tag real_tag-plain">
    标签一
  </span><span class="real_tag real_tag-success real_tag-plain">
    标签二
  </span><span class="real_tag real_tag-info real_tag-plain">
    标签三
  </span><span class="real_tag real_tag-danger real_tag-plain">
    标签四
  </span><span class="real_tag real_tag-warning real_tag-plain">
    标签五
  </span>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="Alert" class="maindiv">
                        <div class="page_tit">警告 &lt;Alert&gt;</div>
                        <div class="table-real-row"></div>
                        <div class="coupon-wrapper">
                            <div class="real-source">
                                <div>
                                    <div role="alert" class="real_alert real_alert-success is-light">
                                        <div class="real_alert_content"><span class="real_alert_title">成功提示的文案</span>
 <i class="real_icon  real_icon_close"></i>

                                        </div>
                                    </div>
                                    <div role="alert" class="real_alert real_alert-info is-light">
                                        <div class="real_alert_content"><span class="real_alert_title">消息提示的文案</span>
 <i class="real_icon  real_icon_close"></i>

                                        </div>
                                    </div>
                                    <div role="alert" class="real_alert real_alert-warning is-light">
                                        <div class="real_alert_content"><span class="real_alert_title">警告提示的文案</span>
 <i class="real_icon  real_icon_close"></i>

                                        </div>
                                    </div>
                                    <div role="alert" class="real_alert real_alert-error is-light">
                                        <div class="real_alert_content"><span class="real_alert_title">错误提示的文案</span>
 <i class="real_icon  real_icon_close"></i>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="real-source">
                                <div>
                                    <div role="alert" class="real_alert real_alert-success is-dark">
                                        <div class="real_alert_content"><span class="real_alert_title">成功提示的文案</span>
 <i class="real_icon  real_icon_close"></i>

                                        </div>
                                    </div>
                                    <div role="alert" class="real_alert real_alert-info is-dark">
                                        <div class="real_alert_content"><span class="real_alert_title">消息提示的文案</span>
 <i class="real_icon  real_icon_close"></i>

                                        </div>
                                    </div>
                                    <div role="alert" class="real_alert real_alert-warning is-dark">
                                        <div class="real_alert_content"><span class="real_alert_title">警告提示的文案</span>
 <i class="real_icon  real_icon_close"></i>

                                        </div>
                                    </div>
                                    <div role="alert" class="real_alert real_alert-error is-dark">
                                        <div class="real_alert_content"><span class="real_alert_title">错误提示的文案</span>
 <i class="real_icon  real_icon_close"></i>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="real-source">
                                <div>
                                    <div role="alert" class="real_alert real_alert-success is-light">
                                        <div class="real_alert_content"><span class="real_alert_title">不可关闭的 alert</span>
 <i class="real_icon  real_icon_close is-light" style="display: none;"></i>

                                        </div>
                                    </div>
                                    <div role="alert" class="real_alert real_alert-info is-light">
                                        <div class="real_alert_content"><span class="real_alert_title">自定义 close-text</span>
 <i class="real_icon is-light">知道了</i>

                                        </div>
                                    </div>
                                    <div role="alert" class="real_alert real_alert-warning is-light">
                                        <div class="real_alert_content"><span class="real_alert_title">设置了回调的 alert</span>
 <i class="real_icon  real_icon_close is-light"></i>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="real-source">
                                <div>
                                    <div role="alert" class="real_alert real_alert-success is-light"> <i class="real_icon real_icon_ok_circle  is-big"></i>

                                        <div class="real_alert_content"><span class="real_alert_title is-bold">成功提示的文案</span>

                                            <p class="real_alert_description">文字说明文字说明文字说明文字说明文字说明文字说明</p><i class="real_icon  real_icon_close is-light"></i>

                                        </div>
                                    </div>
                                    <div role="alert" class="real_alert real_alert-info is-light"><i class="real_icon real_icon_about is-big"></i>

                                        <div class="real_alert_content"><span class="real_alert_title is-bold">消息提示的文案</span>

                                            <p class="real_alert_description">文字说明文字说明文字说明文字说明文字说明文字说明</p><i class="real_icon  real_icon_close is-light"></i>

                                        </div>
                                    </div>
                                    <div role="alert" class="real_alert real_alert-warning is-light"><i class="real_icon real_icon_tips is-big"></i>

                                        <div class="real_alert_content"><span class="real_alert_title is-bold">警告提示的文案</span>

                                            <p class="real_alert_description">文字说明文字说明文字说明文字说明文字说明文字说明</p><i class="real_icon  real_icon_close is-light"></i>

                                        </div>
                                    </div>
                                    <div role="alert" class="real_alert real_alert-error is-light"> <i class="real_icon real_icon_close_fill  is-big"></i>

                                        <div class="real_alert_content"><span class="real_alert_title is-bold">错误提示的文案</span>

                                            <p class="real_alert_description">文字说明文字说明文字说明文字说明文字说明文字说明</p><i class="real_icon  real_icon_close is-light"></i>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="Breadcrumb" class="maindiv">
                        <div class="page_tit">面包屑 &lt;Breadcrumb&gt;</div>
                        <div class="table-real-row"></div>
                        <div class="coupon-wrapper">
                            <div class="real-source">
                                <div>
                                    <div aria-label="Breadcrumb" role="navigation" class="real-breadcrumb"> <span class="real-breadcrumb_item">
                <span role="link" class="real-breadcrumb_inner is-link">首页</span>
 <span role="presentation" class="real-breadcrumb_separator">/</span>
</span> <span class="real-breadcrumb_item">
                <span role="link" class="real-breadcrumb_inner"><a href="/">活动管理</a></span>
 <span role="presentation" class="real-breadcrumb_separator">/</span>
</span> <span class="real-breadcrumb_item">
                <span role="link" class="real-breadcrumb_inner">活动列表</span>
 <span role="presentation" class="real-breadcrumb_separator">/</span>
</span> <span class="real-breadcrumb_item" aria-current="page">
                <span role="link" class="real-breadcrumb_inner">活动详情</span> </span>
                                    </div>
                                </div>
                            </div>
                            <div class="real-source">
                                <div>
                                    <div aria-label="Breadcrumb" role="navigation" class="real-breadcrumb"> <span class="real-breadcrumb_item">
                <span role="link" class="real-breadcrumb_inner is-link">首页</span>
 <i class="real_icon real_icon_right"></i>

                                        </span> <span class="real-breadcrumb_item">
                <span role="link" class="real-breadcrumb_inner">活动管理</span>
 <i class="real_icon real_icon_right"></i>

                                        </span> <span class="real-breadcrumb_item">
                <span role="link" class="real-breadcrumb_inner">活动列表</span>
 <i class="real_icon real_icon_right"></i>

                                        </span> <span class="real-breadcrumb_item" aria-current="page">
                <span role="link" class="real-breadcrumb_inner">活动详情</span> </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="PageHeader" class="maindiv">
                        <div class="page_tit">页头 &lt;PageHeader&gt;</div>
                        <div class="table-real-row"></div>
                        <div class="coupon-wrapper">
                            <div class="real-source">
                                <div>
                                    <div class="real-page-header">
                                        <div class="real-page-header__left"><i class="real_icon real_icon_left real-icon-back"></i>

                                            <div class="real-page-header__title">返回</div>
                                        </div>
                                        <div class="real-page-header__content">详情页面</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="Steps" class="maindiv">
                        <div class="page_tit">步骤条 &lt;Steps&gt;</div>
                        <div class="table-real-row"></div>
                        <div class="coupon-wrapper">
                            <ul class="real-cerate_shop_ul">
                                <li class="real-active" style="z-index: 5;">创建店铺</li>
                                <li style="z-index: 4;">选择功能模块</li>
                                <li style="z-index: 3;">确认订购信息</li>
                                <li style="z-index: 2;">确认付款</li>
                                <li style="z-index: 1;">订购成功</li>
                            </ul>
                        </div>
                    </div>
                    <div id="Card" class="maindiv">
                        <div class="page_tit">卡片 &lt;Card&gt;</div>
                        <div class="table-real-row"></div>
                        <div class="coupon-wrapper">
                            <div class="real-polaroid">
                                <img src="http://www.jq22.com/img/cs/500x300-1.png
" style="width: 100%; height:200px; background-color: #0099FF; ">
                                <div class="real-container">
                                    <p>Hardanger, Norway</p>
                                </div>
                            </div>
                            <div class="real-card">
                                <div class="real-header">
                                     <h1>1</h1>

                                </div>
                                <div class="real-container">
                                    <p>January 1, 2016</p>
                                </div>
                            </div>
                            <br>
                            <br>
                            <div class="real-boxshadow">
                                <img src="http://www.jq22.com/img/cs/500x300-1.png" style="width: 100%; height:200px; background-color: #0099FF; ">
                            </div>
                            <div class="real-admin-index">
                                <dl data-am-scrollspy="{animation: 'slide-right', delay: 100}" class="real-am-scrollspy-init real-am-scrollspy-inview real-am-animation-slide-right">
<dt class="real-qs"><i class="real_icon real_icon_username "></i></dt>

                                    <dd>455</dd>
                                    <dd class="real-f12">团队数量</dd>
                                </dl>
                                <dl data-am-scrollspy="{animation: 'slide-right', delay: 300}" class="real-am-scrollspy-init real-am-scrollspy-inview real-am-animation-slide-right">
<dt class="real-cs"><i class="real_icon real_icon_gift"></i></dt>

                                    <dd>455</dd>
                                    <dd class="real-f12">今日收入</dd>
                                </dl>
                                <dl data-am-scrollspy="{animation: 'slide-right', delay: 600}" class="real-am-scrollspy-init real-am-scrollspy-inview real-am-animation-slide-right">
<dt class="real-hs"><i class="real_icon real_icon_username"></i></dt>

                                    <dd>455</dd>
                                    <dd class="real-f12">商品数量</dd>
                                </dl>
                                <dl data-am-scrollspy="{animation: 'slide-right', delay: 900}" class="real-am-scrollspy-init real-am-scrollspy-inview real-am-animation-slide-right">
<dt class="real-ls"><i class="real_icon real_icon_username"></i></dt>

                                    <dd>455</dd>
                                    <dd class="real-f12">全部收入</dd>
                                </dl>
                            </div>
                            <div class="real-shujuone">
                                <dl>
<dt>全盘收入： 1356666</dt>

<dt>全盘支出： 5646465.98</dt>

<dt>全盘利润： 546464</dt>

                                </dl>
                                <ul>
                                    
<h2>26.83%</h2>

                                    <li>全盘拨出</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="Avatar" class="maindiv">
                        <div class="page_tit">头像 &lt;Avatar&gt;</div>
                        <div class="table-real-row"></div>
                        <div class="coupon-wrapper">
                            <div class="real-source">
                                <div>
                                    <div class="real-demo-avatar demo-basic real-row">
                                        <div class="real-col real-col-12">
                                            <div class="real-sub-title">circle</div>
                                            <div class="real-demo-basic--circle">
                                                <div class="real-block"> <span class="real-avatar real-avatar--circle" style="height: 50px; width: 50px; line-height: 50px;">
                            <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;">
                        </span>

                                                </div>
                                                <div class="real-block"><span class="real-avatar real-avatar--large real-avatar--circle"><img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;"></span>

                                                </div>
                                                <div class="real-block"><span class="real-avatar real-avatar--medium real-avatar--circle"><img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;"></span>

                                                </div>
                                                <div class="real-block"><span class="real-avatar real-avatar--small real-avatar--circle"><img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;"></span>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="real-col real-col-12">
                                            <div class="real-sub-title">square</div>
                                            <div class="real-demo-basic--circle">
                                                <div class="real-block"><span class="real-avatar real-avatar--square" style="height: 50px; width: 50px; line-height: 50px;"><img src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" style="object-fit: cover;"></span>

                                                </div>
                                                <div class="real-block"><span class="real-avatar real-avatar--large real-avatar--square"><img src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" style="object-fit: cover;"></span>

                                                </div>
                                                <div class="real-block"><span class="real-avatar real-avatar--medium real-avatar--square"><img src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" style="object-fit: cover;"></span>

                                                </div>
                                                <div class="real-block"><span class="real-avatar real-avatar--small real-avatar--square"><img src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" style="object-fit: cover;"></span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--pright-->
        </div>
        <!--page-pr-->
        <!--page-->
        <!--以下为非必要代码-->
        <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <link href="css/style.css" type="text/css" rel="stylesheet" />
        <link href="font/iconfont.css" type="text/css" rel="stylesheet" />
        <script>
        $(window).scroll(function () {
            saction();
        });

        function saction() {
            liarr = new Array("col", "Container", "color", "bor", "icon", "font", "link", "button", "form", "input",
                "textarea", "select", "radio",
                "checkbox", "switch", "file", "table-1",
                "table-2", "table-3", "table-4", "table-5", "table-6", "table-7", "table-8", "table-9", "timeLine",
                'progress', 'amplification', 'container', 'coupons', 'Tag', 'Alert', 'Breadcrumb', 'PageHeader',
                'Steps', 'Avatar');
            d = new Array();
            t = $(window).scrollTop();
            for (i = 0; i < liarr.length; i++) {
                d[i] = $("#" + liarr[i]).offset().top - 50; //提前50像素生效
                if (t > d[i]) {
                    $(".li-" + liarr[i]).addClass("on").siblings().removeClass("on");
                }
            }
        }
        window.onload = function () {
            bheight = window.innerHeight - 20;
            pheight = $(".pleft").height();
            if (bheight < pheight) {
                $(".pleft").addClass("pleft-no");
            }
        }

         //复制代码
        $(document).on("click", ".precopy", function () {
            pa = $(this).parents(".pre");
            olheight = $(pa).find("ol").height();
            if ($(pa).find(".precode").is(":hidden")) {
                ol = $(pa).find("ol li");
                $(pa).find(".precode").css({
                    "height": olheight + "px"
                });
                html = '<textarea class="xtext xful">';
                for (i = 0; i < ol.length; i++) {
                    if ($(this).hasClass("precopy2")) {
                        if ($(ol[i]).hasClass("level2")) {
                            html += "&nbsp;&nbsp;";
                        } else if ($(ol[i]).hasClass("level3")) {
                            html += "&nbsp;&nbsp;&nbsp;&nbsp;";
                        } else if ($(ol[i]).hasClass("level4")) {
                            html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                        } else if ($(ol[i]).hasClass("level5")) {
                            html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                        } else if ($(ol[i]).hasClass("level6")) {
                            html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                        } else if ($(ol[i]).hasClass("level7")) {
                            html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                        } else if ($(ol[i]).hasClass("level8")) {
                            html +=
                                "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                        } else if ($(ol[i]).hasClass("level9")) {
                            html +=
                                "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                        } else if ($(ol[i]).hasClass("level9")) {
                            html +=
                                "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                        }
                    }

                    if ($(ol[i]).find("span").html()) {
                        text = $(ol[i]).find("span").html();
                        text = text.replace(/\<\/{0,1}span\>/g, ""); //去除span标签
                        html += text;
                    }

                    if (i != ol.length - 1 && $(this).hasClass("precopy2")) {
                        html += "\n";
                    }
                }
                html += '</textarea>';
                $(pa).find(".precode").html(html);
                $(pa).find("ol").hide();
                $(pa).find(".precode").show();
                $(pa).find(".precode textarea").select();
            } else {
                $(pa).find("ol").show();
                $(pa).find(".precode").hide();
                $(pa).find(".precode").html("");
                $(pa).find(".precode").css({
                    "height": ""
                });
            }
        })
         $(document).on("blur", ".precode textarea", function () {
            $(this).parents(".pre").find("ol").show();
            $(this).parent(".precode").hide();
            $(this).parent(".precode").html("");
        })

         //代码暗色调
         $(document).on("click", ".pretype", function () {
            $(this).parents(".pre").toggleClass("on");
        })
         $(function () {
            var a_idx = 0,
                b_idx = 0;
            c_idx = 0;
            jQuery(document).ready(function ($) {
                $("body").dblclick(function (e) {
                    var a = new Array("欢迎您", "么么哒", "你真好", "棒棒哒", "真可爱", "你最美", "喜欢你", "真聪明", "爱你哦", "好厉害", "你真帅",
                        "祝福你"),
                        b = new Array("#09ebfc", "#ff6651", "#ffb351", "#51ff65", "#5197ff", "#a551ff", "#ff51f7",
                            "#ff518e", "#ff5163", "#efff51"),
                        c = new Array("12", "14", "16", "18", "20", "22", "24", "26", "28", "30");
                    var $i = $("<span/>").text(a[a_idx]);
                    a_idx = (a_idx + 1) % a.length;
                    b_idx = (b_idx + 1) % b.length;
                    c_idx = (c_idx + 1) % c.length;
                    var x = e.pageX,
                        y = e.pageY;
                    $i.css({
                        "z-index": 999,
                        "top": y - 20,
                        "left": x,
                        "position": "absolute",
                        "font-weight": "bold",
                        "font-size": c[c_idx] + "px",
                        "color": b[b_idx]
                    });
                    $("body").append($i);
                    $i.animate({
                        "top": y - 180,
                        "opacity": 0
                    }, 1500, function () {
                        $i.remove();
                    });
                });
            });
            var _hmt = _hmt || [];
        })
        </script>
    </body>

</html>